js control CSS style attribute syntax comparison table_basic knowledge

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, it is commonly used to turn off a floating advertisement display: document.getElementById('ad').style.display='none'; Equivalent to: .ad{ display:none}.

The following is the syntax comparison of JS controlling CSS style sheet：

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
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
color	color
display	display
list-style-type	listStyleType
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style	listStyle
공백	화이트스페이스
글꼴	글꼴
글꼴군	fontFamily
글꼴 크기	글꼴 크기
글꼴 스타일	글꼴 스타일
글꼴 변형	fontVariant
글꼴 두께	글꼴 가중치
자간	문자 간격
줄 바꿈	lineBreak
줄 높이	라인 높이
텍스트 정렬	textAlign
텍스트 장식	텍스트 장식
텍스트 들여쓰기	textIndent
텍스트 양쪽 정렬	textJustify
텍스트 변환	텍스트 변환
세로 정렬	세로정렬