A brief analysis of CSS attribute and naming code in JavaScript _javascript skills

Many CSS style properties have hyphens in their names, and in JavaScript, hyphens are interpreted as a minus sign.

Therefore, the property name of the Css2properties object is somewhat different from the real CSS property name.

If a CSS property name contains one or more hyphens, you need to delete the hyphen in JS, and then capitalize the letter immediately after the hyphen.

Note that the float is a JS keyword, so in JS float is written cssfloat and or Floatstyle.

Below is CSS's own properties and JavaScript CSS Code table:

box label and property control:
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
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-right paddingright
Padding-top paddingtop

Color and background labels and properties control:
Code
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

Style label and property control:

Code
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 property control:

Code
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 Labels and properties control:
Code
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