A brief analysis of CSS properties and naming conventions in JavaScript


Many CSS style properties have a hyphen in their names, which in JavaScript is interpreted as a minus sign.

Therefore, the property name of the CSS2Properties object is a little different from the real CSS property name.

If a CSS property name contains one or more hyphens, the hyphen needs to be removed in JS and the letter immediately after the hyphen is capitalized.

Note that float is a JS keyword, so in JS float is written as cssFloat with or floatStyle.

The following is the comparison table of CSS properties and CSS coding in JavaScript:

**Box label and attribute comparison: **Code 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 The clear clear Float floatStyle (ie) cssFloat (FF)   Margin margin Margin - bottom marginBottom Margin - left marginLeft Margin - right marginRight Margin - top marginTop Padding padding Padding - bottom paddingBottom Padding - left paddingLeft Padding u-right paddingRight Padding - top paddingTop

**Color and background labels and attributes: **Code CSS syntax (case insensitive) JavaScript syntax (case sensitive) Background background Background - attachment backgroundAttachment Background - color backgroundColor Background - image backgroundImage Background - the position backgroundPosition Background - repeat backgroundRepeat Color color

Style label and attribute comparison:

Code CSS syntax (case insensitive) JavaScript syntax (case sensitive) Display the display The list - style - type listStyleType The list - style - image listStyleImage The list - style - position listStylePosition The list - style listStyle White - space whiteSpace

Text style label and attribute comparison:

Code CSS syntax (case insensitive) JavaScript syntax (case sensitive) The font font The font-family fontFamily The font - size fontSize The font - style fontStyle The font - variant fontVariant The font - weight fontWeight

**Text label and attribute comparison: **Code CSS syntax (case insensitive) JavaScript syntax (case sensitive) Letter - spacing letterSpacing The line - break lineBreak The line - height lineHeight The text - align textAlign The text - decoration textDecoration The text text-indent textIndent The text - the justify textJustify The text - transform textTransform Vertical - align verticalAlign