CSS와 JS는 긴밀하게 협력하여 페이지에 많은 고유한 효과를 추가합니다. 52CSS.com에도 관련 사례가 있습니다. 특별한 효과를 얻으려면 Javascript를 사용하여 특정 태그의 CSS 속성을 동적으로 변경해야 합니다. 예를 들어, 마우스가 이미지 위로 지나갈 때 이미지에 테두리를 추가합니다. 코드는 다음과 같습니다. JavaScript에서 스타일 다음의 속성은 무엇입니까?
<스크립트 유형="텍스트/자바스크립트">
함수 imageOver(e) {
e.style.border="1px 단색 빨간색";
}
함수 imageOut(e) {
e.style.borderWidth=0;
}
</script>
<img src="01.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />
JavaScript CSS 스타일 속성 비교표 상자
레이블 및 속성 비교
CSS 구문(대소문자 구분 안 함) JavaScript 구문(대소문자 구분)
국경 국경
경계-하단 경계하단
테두리 하단 색상 borderBottomColor
border-bottom-style borderBottomStyle
테두리 하단 너비 borderBottomWidth
border-color borderColor
국경-왼쪽 국경왼쪽
테두리 왼쪽 색상 borderLeftColor
국경 왼쪽 스타일 borderLeftStyle
테두리 왼쪽 너비 borderLeftWidth
경계선-오른쪽 경계선오른쪽
테두리 오른쪽 색상 borderRightColor
국경 오른쪽 스타일 borderRightStyle
테두리 오른쪽 너비 borderRightWidth
테두리 스타일 borderStyle
테두리-상단 테두리상단
테두리 상단 색상 borderTopColor
테두리 상단 스타일 borderTopStyle
테두리 상단 너비 borderTopWidth
테두리 너비 테두리 너비
분명하다
float 스타일
여백 여백
여백-하단 여백하단
여백-왼쪽 여백왼쪽
여백-오른쪽 여백오른쪽
여백-상단 여백상단
패딩 패딩
패딩 바닥 paddingBottom
패딩-왼쪽 패딩왼쪽
패딩 오른쪽 paddingRight
padding-top paddingTop
색상 및 배경 태그와 속성은
CSS 구문과 비교됩니다(대소문자 구분) JavaScript 구문(대소문자 구분)
배경 배경
배경 첨부 배경 첨부
배경색 배경색상
배경 이미지 배경 이미지
배경 위치 backgroundPosition
배경 반복 배경반복
색상 색상
스타일 태그 및 속성은
CSS 구문(대소문자 구분)과 비교됩니다. JavaScript 구문(대소문자 구분)
디스플레이 디스플레이
목록 스타일 유형 listStyleType
목록 스타일 이미지 listStyleImage
목록 스타일 위치 listStylePosition
목록 스타일 listStyle
공백 공백
텍스트 스타일 태그 및 속성은
CSS 구문과 비교됩니다(대소문자 구분) JavaScript 구문(대소문자 구분)
글꼴 글꼴
글꼴 계열 글꼴 계열
글꼴 크기 글꼴 크기
글꼴 스타일 글꼴 스타일
글꼴 변형 글꼴 변형
글꼴 가중치 글꼴 가중치
텍스트 태그 및 속성은
CSS 구문과 비교됩니다(대소문자 구분) JavaScript 구문(대소문자 구분)
문자 간격 letterSpacing
line-break lineBreak
line-height lineHeight
텍스트 정렬 textAlign
텍스트 장식 textDecoration
텍스트 들여쓰기
텍스트 양쪽 정렬 텍스트 양쪽 정렬
텍스트 변환 textTransform
수직 정렬 수직 정렬