Huoshi Website: CSS attributes and JavaScript encoding table

　　DocumentCSS 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, when the mouse goes through an image, we add a border to the image. The code may be like this: what is the attribute behind the style in JavaScript?

<Script type = "text/javascript"> Function imageOver (e ){ E. style. border = "1px solid red "; } Function imageOut (e ){ E. style. borderWidth = 0; } </Script>

JavaScript CSS Style Attribute Table

Comparison between box labels and attributes

CSS syntax (Case Insensitive) JavaScript syntax (case sensitive) 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 Float floatStyle Margin Margin-bottom marginBottom Margin-left marginLeft Margin-right marginRight Margin-top marginTop 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-attachment backgroundAttachment Background-color backgroundColor Background-image backgroundImage Background-position backgroundPosition Background-repeat backgroundRepeat Color

Comparison between style labels and attributes

CSS syntax (Case Insensitive) JavaScript syntax (case sensitive) 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-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