Code to modify CSS attributes with JavaScript_javascript skills

Modifying CSS properties with JavaScript only requires writing native JavaScript.

1. Use JS to modify the class attribute value of the tag:

The class attribute is one of the ways to reference a style sheet on the tag, and its value is a style sheet selector, if the value of the class attribute is changed, the style sheet referenced by the tag will also be changed, so this is the first modification method.

The code to change the class attribute of a tag is:

document.getElementById( id ).className = string;
document.getElementById( id ) is used to get the DOM corresponding to the tag Object, you can also obtain it using other methods. className is a property of the DOM object that corresponds to the label's class attribute. String is the new value of the class attribute, which should be a defined CSS selector.

Using this method, you can replace the CSS style sheet of the tag with another one, or you can apply the specified style to a tag that does not have a CSS style applied.

Example:

Copy code The code is as follows:

< ;style type="text/css">
.txt {
font-size: 30px; font-weight: bold; color: red;
}

Welcome!

Change style

2. Use JS to modify the style attribute value of the tag:

The style attribute is also one of the ways to reference the style sheet on the tag, and its value is a CSS style sheet. The DOM object also has a style attribute, but this attribute itself is also an object. The attributes of the Style object correspond to the CSS attributes one-to-one. When the attributes of the Style object are changed, the CSS attribute value of the corresponding tag will also change, so this is The second modification method.

The code to change the CSS attribute of a label is:

document.getElementById( id ).style.property name = value;
document.getElementById( id ) is used to obtain the label corresponding You can also obtain the DOM object using other methods. style is a property of the DOM object, which is itself an object. Property name is the property name of the Style object, which corresponds to a certain CSS property.

Note: This method modifies a single CSS property. It does not affect the values ​​of other CSS properties on the label.

Example:

Copy code The code is as follows:

div id="t2">Welcome!

Size
ColorBackground
Border