JavaScript_javascript 기술의 CSS 속성 및 명명 규칙에 대한 간략한 분석

많은 CSS 스타일 속성에는 이름에 하이픈이 포함되어 있으며 이는 JavaScript에서 빼기 기호로 해석됩니다.

따라서 CSS2Properties 객체의 속성 이름은 실제 CSS 속성 이름과 약간 다릅니다.

CSS 속성 이름에 하나 이상의 하이픈이 포함된 경우 JS에서 해당 하이픈을 삭제하고 하이픈 바로 뒤의 원래 문자를 대문자로 변경해야 합니다.

float는 JS의 키워드이므로 JS에서는 float가 cssFloat 또는 floatStyle로 작성된다는 점에 유의해야 합니다.

다음은 CSS 속성과 JavaScript의 CSS 인코딩 비교표입니다.

상자 태그 및 속성 비교:
코드
CSS 구문(대소문자 구분) JavaScript 구문(대소문자 구분)
테두리 테두리
테두리-하단 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 Border hardStyle
Border-Left-Width BorderLeftwidth
Border-Right BorderRight
Border-COLOR BORERRIGHT Color Border-Right-Style BorderRightStyle
Border- 오른쪽 너비  borderRightWidth
border-style  borderStyle
border-top  borderTop
border-top-color  borderTopColor
border-top-style  borderTopStyle
border -top-width  borderTopWidth
테두리 - 너비 borderWidth
clearclear
float floatStyle(ie) cssFloat(FF)
여백 여백
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 패딩탑

색상 및 배경 태그와 속성 비교:
코드CSS 구문(대소문자 구분) JavaScript 구문(대소문자 구분)
배경 배경
배경 첨부 backgroundAttachment
배경색 | 배경색
배경위치 | 배경위치
배경반복
색 |

스타일 태그 및 속성 비교:

코드CSS 구문(대소문자 구분) JavaScript 구문(대소문자 구분)

표시 표시

list-style-type listStyleType
list-style-image listStyleImage
list-style -position　 listStylePosition
list-style　 listStyle
white-space　 whiteSpace

텍스트 스타일 태그 및 속성 비교:

코드CSS 구문(대소문자 구분) JavaScript 구문(대소문자 구분)

font >font-variant　fontVariant

font-weight 　fontWeight




텍스트 태그 및 속성 비교:

코드

CSS 구문(대소문자 구분) JavaScript 구문(대소문자 구분)

letter-spacing　 letterSpacing

line-break lineBreak

줄 높이 lineHeight텍스트 정렬 textAlign
텍스트 장식 textDecorationtext-indent textIndent
text-justify textJustify
text-transform textTransform
vertical-align VerticalAlign