Code for modifying CSS attributes using JavaScript

You can only write native JavaScript to modify CSS attributes using javascript.

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

The class attribute is one of the methods for referencing a style sheet on a label. Its value is a style sheet selector. If the value of the class attribute is changed, the style table referenced by the label is replaced, so this is the first modification method.

The code for changing the class attribute of a tag is:

Document. getElementById (id). className = string;
Document. getElementById (id) is used to obtain the DOM object corresponding to the tag. You can also use other methods. ClassName is an attribute of a DOM object. It corresponds to the class attribute of the tag. A string is a new value of the class attribute. It should be a defined CSS selector.

This method can be used to replace the CSS style table of a tag with another one, or apply the specified style to a tag that does not apply the CSS style.

Example:

Copy codeThe Code is as follows: <style type = "text/css">
. Txt {
Font-size: 30px; font-weight: bold; color: red;
}
</Style>
<Div id = "tt"> welcome! </Div>
<P> <button onclick = "setClass ()"> change the style </button> </p>
<Script type = "text/javascript">
Function setClass ()
{
Document. getElementById ("tt"). className = "txt ";
}
</Script>

2. Use JS to modify the label's style attribute value:

The style attribute is also one of the methods for referencing a style sheet on a label. Its value is a CSS style sheet. DOM objects also have style attributes, but this attribute is also an object. The attributes of Style objects correspond to CSS attributes one by one. When the attributes of Style objects are changed, the CSS attribute value of the corresponding tag is changed, so this is the second method of modification.

The code for changing the CSS attribute of a tag is:

Document. getElementById (id). style. attribute name = value;
Document. getElementById (id) is used to obtain the DOM object corresponding to the tag. You can also use other methods. Style is an attribute of a DOM object. It is also an object. The attribute name is the attribute name of the Style object, which corresponds to a CSS attribute.

Note: This method modifies a single CSS attribute without affecting other CSS attribute values on the tag.

Example:

Copy codeThe Code is as follows: div id = "t2"> welcome! </Div>
<P> <button onclick = "setSize ()"> size </button>
<Button onclick = "setColor ()"> color </button>
<Button onclick = "setbgColor ()"> background </button>
<Button onclick = "setBd ()"> border </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 attributes in document. getElementById ("xx"). style. xxx?

Comparison between box labels and attributes
CSS syntax (Case Insensitive)	JavaScript syntax (case sensitive)
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
Comparison of color and background tags and attributes
CSS syntax (Case Insensitive)	JavaScript syntax (case sensitive)
Background	Background
Background-attachment	BackgroundAttachment
Background-color	BackgroundColor
Background-image	BackgroundImage
Background-position	BackgroundPosition
Background-repeat	BackgroundRepeat
Color	Color
Comparison between style labels and attributes
CSS syntax (Case Insensitive)	JavaScript syntax (case sensitive)
Display	Display
List-style-type	ListStyleType
List-style-image	ListStyleImage
List-style-position	ListStylePosition
List-style	ListStyle
White-space	WhiteSpace
Text style label and attribute comparison
CSS syntax (Case Insensitive)	JavaScript syntax (case sensitive)
Font	Font
Font-family	FontFamily
Font-size	FontSize
Font-style	FontStyle
Font-variant	FontVariant
Font-weight	FontWeight
Text tag and attribute comparison
CSS syntax (Case Insensitive)	JavaScript syntax (case sensitive)
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