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

Method:

What are all the properties 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