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

盒子标签和属性对照
CSS语法（不区分大小写）	JavaScript语法（区分大小写）
border	border
border-bottom	borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
border-color	borderColor
border-left	borderLeft
border-left-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-right	borderRight
border-right-color	borderRightColor
border-right-style	borderRightStyle
border-right-width	borderRightWidth
border-style	borderStyle
border-top	borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border-top-width	borderTopWidth
border-width	borderWidth
clear	clear
float	floatStyle
margin	margin
margin-bottom	marginBottom
margin-left	marginLeft
margin-right	marginRight
margin-top	marginTop
padding	padding
padding-bottom	paddingBottom
padding-left	paddingLeft
padding-right	paddingRight
padding-top	paddingTop
颜色和背景标签和属性对照
CSS 语法（不区分大小写）	JavaScript 语法（区分大小写）
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
color	color
样式标签和属性对照
CSS语法（不区分大小写）	JavaScript 语法（区分大小写）
display	display
list-style-type	listStyleType
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style	listStyle
white-space	whiteSpace
文字样式标签和属性对照
CSS 语法（不区分大小写）	JavaScript 语法（区分大小写）
font	font
font-family	fontFamily
font-size	fontSize
font-style	fontStyle
font-variant	fontVariant
font-weight	fontWeight
文本标签和属性对照
CSS 语法（不区分大小写）	JavaScript 语法（区分大小写）
letter-spacing	letterSpacing
line-break	lineBreak
line-height	lineHeight
text-align	textAlign
text-decoration	textDecoration
text-indent	textIndent
text-justify	textJustify
text-transform	textTransform
vertical-align	verticalAlign

【推荐学习：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!