CSS DOM dynamic styling

CSS DOM dynamic style

• Use JS to operate each attribute in CSS.

• JS can only operate or modify inline styles. For example: imgObj.style.border = “1px solid red”

• For class styles, assign values through className. For example: imgObj.className = “imgClass”

##style object

• Each HTML tag has a style attribute. But this style attribute is also a style object.

• So, what are the properties of this style object? The attributes of the style object correspond to the attributes in CSS one-to-one.

• Therefore, the style object is used instead of CSS.

• For example: imgObj.style.border = “1px solid red”;

##Conversion between style object attributes and CSS attributes

If it is a word, style object attributes and CSS attributes Same.
If there are multiple words, the first word should be all lowercase, the first letter of each subsequent word should be capitalized, and the underscore should be removed.

divObj.style.backgroundColor = “red”;

• ## divObj.style.backgroundImage = “url(images /bg.gfi)";

• divObj.style.fontSize = "18px";