Can var elements' be group together for styling on JavaScript?

Question

I am trying to change the styling for my HTML elements without touching the HTML and CSS file.

        resultFirstName.style.fontWeight = "bold";
        resultFirstName.style.fontStyle = "uppercase";
        resultFirstName.style.fontStyle = "italic";
        resultFirstName.style.fontSize = "1.5em";

        resultLastName.style.fontWeight = "bold";
        resultLastName.style.fontStyle = "uppercase";
        resultLastName.style.fontStyle = "italic";
        resultLastName.style.fontSize = "1.5em";

I am trying to put these two variables together into something like this below. But I am not sure how to do it.

        resultFirstName + resultLastName.style.fontWeight

Answer 1

You can create a string variable with all the css properties and values you want, and assign that to the selected element. PS for uppercase use text-transform ?

const styles = `
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
    text-transform: uppercase;`

document.querySelector('.firtsName').style = styles

<h1 class='firtsName'> Test </h1>

Answer 2

You could do the following:

const styles = {
    fontWeight: "bold",
    textTransform: "uppercase",
    fontStyle: "italic",
    fontSize: "1.5em"
};

Object.assign(resultFirstName.style, styles);
Object.assign(resultLastName.style, styles);

Using Object.assign will just add/update the given declarations. Other existing declarations are left untouched.

If you want to reset all styles such that only your ones are set for the element, you can just clear them before assigning new ones:

resultFirstName.style.cssText = '';
resultLastName.style.cssText = '';

Side note: I have changed the property used for the uppercase value from fontStyle to textTransform because probably that's what you actually meant.

Answer 3

You can use a for loop like this:

const elements = [resultFirstName, resultLastName];

for (const element of elements) {
    element.style.fontWeight = "bold";
    element.style.textTransform = "uppercase";
    element.style.fontStyle = "italic";
    element.style.fontSize = "1.5em";
}

Another possible way is:

const elements = [resultFirstName, resultLastName];

for (var i = 0; i < elements.length; ++i) {
    const element = elements[i];

    element.style.fontWeight = "bold";
    element.style.textTransform = "uppercase";
    element.style.fontStyle = "italic";
    element.style.fontSize = "1.5em";
}

Answer 4

Expanding on zelijkoDe’s code, you could create a class in JavaScript to be applied to both resultFirstName and resultLastName elements so that classes do not have to be written in the HTML file:

//Create/add a class to desired elements
resultFirstName.classList.add(“styles”);    
resultLastName.classList.add(“styles”); 

//Define class parameters using zelijkoDe’s code
const styles = `
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
    text-transform: uppercase;`

//Apply class parameters to the class ‘styles’
document.querySelector(“.styles ”).style = styles

For legibility, change the name of the class ‘styles’ to something easier to differentiate.