js 제어 CSS 스타일 속성 구문 비교 table_basic 지식

CSS와 JS는 긴밀하게 협력하여 페이지에 많은 고유한 효과를 추가합니다. 특별한 효과를 얻으려면 Javascript를 사용하여 특정 태그의 CSS 속성을 동적으로 변경해야 합니다.

예를 들어 일반적으로 플로팅 광고 표시를 끄는 데 사용됩니다. document.getElementById('ad').style.display='none'; .ad{ display:none}

다음은 CSS 스타일 시트를 제어하는 ​​JS의 구문 비교입니다：

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
텍스트 변환	텍스트 변환
세로 정렬	세로정렬