Comparison table of CSS properties and JavaScript encoding methods

CSS and JS work closely together to add many unique effects to our pages. In order to achieve some special effect, we need to use Javascript to dynamically change the CSS properties of a certain tag. For example: when the mouse passes over an image, we add a border to the image. The code may be as follows: What should be the attribute after style in JavaScript?

JavaScript CSS Style attribute comparison table

Box label and attribute comparison

CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写) 
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

颜色和背景标签和属性对照

CSS syntax (case-insensitive) JavaScript syntax (case-sensitive) backgroundColor Image
background-position 　　 　　 backgroundPosition
background-repeat 　　　　 backgroundRepeat
color Style tags and attribute comparison

CSS syntax (case-insensitive) JavaScript syntax (case-sensitive) listStyleImage
list-style-position listStylePosition
list-style listStyle

white-space　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　int　　　　　　　　　　　　　　　　　　　 havencessabaous-space 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　icular   by   by                                                                                           

font-family　 fontFamily
font-size fontSize

font-style fontStyle

font-variant fontVariant
font-weight fontWeight

Text label and attribute comparison

CSS syntax (case-insensitive)
letter-spacing                                                                                                                                                                                                                                          use using using using using using using             through using ’ s ’ s ’ ‐ ‐ ‐ ‐ ‐‐ ‐                -align　　　　　　　　　　　　　　　　　　　　　　 　　textJustify

text-transform textTransform

vertical-align verticalAlign