How to change css attribute value in js

Methods to change css attribute values: 1. Use the "document.getElementById(id value).className=string;" statement to modify; 2. Use "document.getElementById(id value).style.attribute name =value;" statement modification.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

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

The class attribute is one of the ways to reference a style sheet on the label, 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 label is:

document.getElementById(id值).className = 字符串;

document.getElementById(id) is used to obtain the DOM object corresponding to the label. You can also obtain it using other methods. className is an attribute of the DOM object that corresponds to the tag'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>
<div id="tt">欢迎光临！</div>
<p><button onclick="setClass()">更改样式</button></p>
<script type="text/javascript">
function setClass()
{
document.getElementById( "tt" ).className = "txt";
}
</script>

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. One, 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 properties of a label is:

document.getElementById( id ).style.属性名 = 值;

document.getElementById(id) is used to obtain the DOM object corresponding to the label. You can also obtain it 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:

<div id="t2">欢迎光临！</div>
<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>

Method:

What are all the attributes in document.getElementById("xx").style.xxx

【推荐学习：javascript高级教程】

The above is the detailed content of How to change css attribute value in js. For more information, please follow other related articles on the PHP Chinese website!