CSS and JS work closely together to add a lot of unique effects to our pages. To achieve some special effect, we need to use Javascript to dynamically change the CSS attribute of a tag.
For example, it is often used to close a floating ad display: document. getElementById ('ad'). style. display = 'none'; equivalent to:. ad {display: none }.
The following is the syntax comparison of CSS style sheets controlled by JS.:
| 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 |
| Background |
Background |
| Background-attachment |
BackgroundAttachment |
| Background-color |
BackgroundColor |
| Background-image |
BackgroundImage |
| Background-position |
BackgroundPosition |
| Background-repeat |
BackgroundRepeat |
| Color |
Color |
| Display |
Display |
| List-style-type |
ListStyleType |
| List-style-image |
ListStyleImage |
| List-style-position |
ListStylePosition |
| List-style |
ListStyle |
| White-space |
WhiteSpace |
| Font |
Font |
| Font-family |
FontFamily |
| Font-size |
FontSize |
| Font-style |
FontStyle |
| Font-variant |
FontVariant |
| Font-weight |
FontWeight |
| 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 |