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