JavaScript CSS 스타일 속성 비교표

저자：Eve Cole 업데이트 시간：2009-06-12 17:47:10

특별한 효과를 얻으려면 Javascript를 사용하여 특정 태그의 CSS 속성을 동적으로 변경해야 합니다. 예를 들어 마우스가 이미지 위로 지나갈 때 이미지에 테두리를 추가합니다. 코드는 다음과 같습니다.

JavaScript 코드

"phplamp.gif" onmouseover= "imageOver(this)" onmouseout= "imageOut(this)" />

JavaScript 스타일 뒤 의 속성은 무엇이어야 합니까?

JavaScript CSS 스타일 속성 비교 테이블

borderTopStyle 하단-오른쪽 글꼴 간격 줄 바꿈 줄 정렬 텍스트 텍스트 장식 텍스트들여쓰기

상자 레이블 및 속성 비교
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
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
수직 정렬 수직	정렬