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

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

CodePudding user response：

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 = '';
resultLastName.style = '';

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

CodePudding user response：

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