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
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>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.
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";
}