특별한 효과를 얻으려면 Javascript를 사용하여 특정 태그의 CSS 속성을 동적으로 변경해야 합니다. 예를 들어 마우스가 이미지 위로 지나갈 때 이미지에 테두리를 추가합니다. 코드는 다음과 같습니다.
JavaScript 스타일 뒤 의 속성은 무엇이어야 합니까?
상자 레이블 및 속성 비교 | |
---|---|
CSS 구문(대소문자 구분) | JavaScript 구문(대소문자 구분) |
border | border |
border-bottom | borderBottom |
border-bottom-color | borderBottomColor |
border-bottom-style | borderBottomStyle |
border-bottom-width | borderBottomWidth |
border -color | borderColor |
border- | left |
-color left 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 | borderWidthclearclear |
float | float |
스타일 | 여백 |
여백 | margin |
-bottom | margin | 하단
여백-왼쪽 여백왼쪽 | 여백 |
여백 | 오른쪽 |
여백-상단 | 여백상단 |
패딩 | padding |
padding-bottom | paddingBottom |
padding-left | paddingLeft |
padding-right | paddingRight |
padding-top | paddingTop |
색상 및 배경 레이블 및 속성 비교 | |
CSS 구문(대소문자 구분) | JavaScript 구문(대소문자 구분) |
background | background |
background-attachment | backgroundAttachment |
background-color | backgroundColor |
background-image | backgroundImage |
background-position | backgroundPosition |
background-repeat | backgroundRepeat |
color | color |
스타일 태그 및 속성은 CSS 구문과 비교됩니다 | |
(대소문자 구분) | JavaScript 구문(대소문자 구분) |
표시 | 표시 |
list-style-type | listStyleType |
목록-스타일-이미지 | listStyleImage |
목록-스타일-위치 목록 | StylePosition |
목록-스타일 | listStyle |
공백 | 공백 |
텍스트 스타일 태그 및 속성은 | |
CSS 구문과 비교됩니다(대소문자 구분) | JavaScript 구문(대소문자 구분) |
글꼴 | 글꼴 |
군 글꼴 | 가족 |
글꼴 크기 글꼴 | 크기 |
글꼴 스타일 글꼴스타일 | 글꼴 변형 |
글꼴변형 글꼴 | 가중치 |
글꼴 | 가중치 |
텍스트 레이블 및 속성 비교 | |
CSS 구문(대소문자 구분) | JavaScript 구문(대소문자 구분) |
문자 간격 | 문자 |
선 | 나누기 | 줄
높이 줄 | 높이 |
텍스트 | 정렬 텍스트정렬 |
텍스트 | 장식 | 텍스트
텍스트 | 들여쓰기 |
텍스트 정렬 | 텍스트 정렬 |
텍스트 변환 | textTransform |
수직 정렬 수직 | 정렬 |