How to Use JS to add CSS styles and JS to add CSS styles
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 |
How to Use JS to add CLASS content in CSS styles?
If you do not reload the page, you can do the following.
<Ul id = "nav">
<Li onclick = "setTab (0)" rel = "home"> <a href = "#"> homepage </a> </li>
<Li onclick = "setTab (1)" rel = "skill"> <a href = "#"> puzzle </a> </li>
</Ul>
<Script>
Function setTab (n ){
Var tli = document. getElementById ("nav"). getElementsByTagName ("li ");
For (I = 0; I <tli. length; I ++ ){
Tli [I]. className = I = n? "Current ":"";
}
}
</Script>
How can I use JS to change the style of the loaded CSS style sheet? Detailed tutorial
I have already said this, but it is simpler to use jquery. For example, to change the class to the undis style
$ (". Undis" ).css ("margin-left", "30px ");
Or add a class for it.
$ (". Undis"). addcss ("dis ~
This advantage is that css styles are the same. if Javascript is used, css styles are written differently. For example, margin-left. In js, marginleft must be written.