Detailed code example of how to modify CSS properties with native JavaScript

Using JavaScript to modify CSS properties only requires writing native javascript.

Use JS to modify the value of the class attribute of the label:

The class attribute is one of the ways to reference the style sheet on the label. Its value is a selector of the style sheet. If the class is changed The value of the attribute and the style sheet referenced by the tag are also changed, so this is the first modification method.

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

document.getElementById( id ).className = string;

document.getElementById( id ) is used to get the label You can also obtain the corresponding DOM object 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 label with another one, or you can also apply the specified style to a label that does not have a CSS style applied.

Example:

<style type="text/css"> 
.txt { 
font-size: 30px; font-weight: bold; color: red; 
} 
</style> 
<p id="tt">欢迎光临！</p> 
<p><button onclick="setClass()">更改样式</button></p> 
<script type="text/javascript"> 
function setClass() 
{ 
document.getElementById( "tt" ).className = "txt"; 
} 
</script>

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. 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:

p id="t2">欢迎光临！</p> 
<p><button onclick="setSize()">大小</button> 
<button onclick="setColor()">颜色</button> 
<button onclick="setbgColor()">背景</button> 
<button onclick="setBd()">边框</button> 
</p> 
<script type="text/javascript"> 
function setSize() 
{ 
document.getElementById( "t2" ).style.fontSize = "30px"; 
} 
function setColor() 
{ 
document.getElementById( "t2" ).style.color = "red"; 
} 
function setbgColor() 
{ 
document.getElementById( "t2" ).style.backgroundColor = "blue"; 
} 
function setBd() 
{ 
document.getElementById( "t2" ).style.border = "3px solid #FA8072"; 
} 
</script>

The above is the detailed content of Detailed code example of how to modify CSS properties with native JavaScript. For more information, please follow other related articles on the PHP Chinese website!