많은 CSS 스타일 속성에는 이름에 하이픈이 포함되어 있으며 이는 JavaScript에서 빼기 기호로 해석됩니다.
따라서 CSS2Properties 객체의 속성 이름은 실제 CSS 속성 이름과 다소 다릅니다.
CSS 속성 이름에 하나 이상의 하이픈이 포함된 경우 JS에서 하이픈을 제거해야 하며 하이픈 바로 뒤의 원래 문자를 대문자로 변경해야 합니다.
float는 JS의 키워드이므로 JS에서 float는 cssFloat 또는 floatStyle로 작성됩니다.
다음은 JavaScript의 CSS 속성과 CSS 인코딩 간의 비교표입니다.
상자 라벨 및 속성 비교:
암호
CSS 구문(대소문자 구분) JavaScript 구문(대소문자 구분)
국경 국경
경계-하단 경계하단
테두리 하단 색상 borderBottomColor
border-bottom-style borderBottomStyle
테두리 하단 너비 borderBottomWidth
border-color borderColor
국경-왼쪽 국경왼쪽
테두리 왼쪽 색상 borderLeftColor
국경 왼쪽 스타일 borderLeftStyle
테두리 왼쪽 너비 borderLeftWidth
경계선-오른쪽 경계선오른쪽
테두리 오른쪽 색상 borderRightColor
국경 오른쪽 스타일 borderRightStyle
테두리 오른쪽 너비 borderRightWidth
테두리 스타일 borderStyle
테두리-상단 테두리상단
테두리 상단 색상 borderTopColor
테두리 상단 스타일 borderTopStyle
테두리 상단 너비 borderTopWidth
테두리 너비 테두리 너비
분명하다
float floatStyle(즉) cssFloat(FF)
여백 여백
여백-하단 여백하단
여백-왼쪽 여백왼쪽
여백-오른쪽 여백오른쪽
여백-상단 여백상단
패딩 패딩
패딩 바닥 paddingBottom
패딩-왼쪽 패딩왼쪽
패딩 오른쪽 paddingRight
패딩탑 paddingTop
색상 및 배경 라벨과 속성 비교:
암호
CSS 구문(대소문자 구분) JavaScript 구문(대소문자 구분)
배경 배경
배경 첨부 backgroundAttachment
배경색 배경색상
배경 이미지 배경 이미지
배경 위치 backgroundPosition
배경 반복 배경반복
색상 색상
스타일 태그 및 속성 비교:
암호
CSS 구문(대소문자 구분) JavaScript 구문(대소문자 구분)
디스플레이 디스플레이
목록 스타일 유형 listStyleType
목록 스타일 이미지 listStyleImage
목록 스타일 위치 listStylePosition
목록 스타일 listStyle
공백 공백
텍스트 스타일 레이블 및 속성 비교:
암호
CSS 구문(대소문자 구분) JavaScript 구문(대소문자 구분)
글꼴 글꼴
글꼴 계열 글꼴 계열
글꼴 크기 글꼴 크기
글꼴 스타일 글꼴 스타일
글꼴 변형 글꼴 변형
글꼴 무게 글꼴 무게
텍스트 레이블 및 속성 비교:
암호
CSS 구문(대소문자 구분) JavaScript 구문(대소문자 구분)
문자 간격 letterSpacing
line-break lineBreak
line-height lineHeight
텍스트 정렬 textAlign
텍스트 장식 textDecoration
텍스트 들여쓰기
텍스트 양쪽 정렬 텍스트 양쪽 정렬
텍스트 변환 textTransform
수직 정렬 수직 정렬