javascript_javascript 스킬에서 CSS를 사용할 때 주의할 점 정리

1. 단일 요소의 스타일을 변경할 때 스타일 개체의 구문은 CSS에서 사용되는 구문과 거의 일대일로 대응됩니다. 그러나 하이픈이 포함된 속성은 "카멜 캐스팅" 형식으로 대체됩니다. 예를 들어, 이제 글꼴 크기는 글꼴 크기가 되고, 여백 상단은 marginTop
2가 됩니다. JavaScript의 예약어는 style.float를 사용하여 style.cssFloat로 변경할 수 없습니다(IE에서는 style.styleFloat 사용).
3. 요소의 계산된 스타일을 가져옵니다.
W3C DOM에서는 다음을 수행할 수 있습니다. >

코드 복사 코드는 다음과 같습니다.

varheading = document.getElementById("heading") ;
var 계산된 스타일 = document.defaultView.getComputeStyle(heading,null);
var 계산FontFamily = 계산된Style.fontFamily;//sans-serif

IE는 DOM 표준 사용을 지원하지 않습니다.

코드 복사 코드는 다음과 같습니다.

varheading = document.getElementById("heading");
var ComputedFontFamily = Heading.currentStyle.fontFamily;//sans-serif

위 방법을 기반으로 크로스 브라우저 기능을 생성할 수 있습니다. 구현

코드 복사 코드는 다음과 같습니다.

functionretrieveCompulatedStyle(element,styleProperty){
var 계산된 스타일 = null
if(typeof element.currentStyle != "정의되지 않음"){
computedStyle = element.currentStyle
}else{
computedStyle = document.defaultView.getCompulatedStyle( 요소,null)
}
return ComputedStyle[styleProperty]
}


对照表

CSS Properties To JavaScript Reference Conversion

CSS Property	JavaScript Reference
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
border	border
border-bottom	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	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	borderWidth
clear	clear
clip	clip
color	color
cursor	cursor
display	display
filter	filter
font	font
font-family	fontFamily
font-size	fontSize
font-variant	fontVariant
font-weight	fontWeight
height	height
left	left
letter-spacing	letterSpacing
line-height	lineHeight
list-style	listStyle
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style-type	listStyleType
마진	마진
여백-하단	여백하단
여백-왼쪽	여백왼쪽
여백 오른쪽	여백오른쪽
마진톱	마진상위
오버플로우	오버플로
패딩	패딩
패딩 바닥	패딩하단
패딩-왼쪽	왼쪽 패딩
패딩 오른쪽	padding오른쪽
패딩탑	패딩탑
페이지 나누기	pageBreakAfter
페이지 나누기 전	pageBreakBefore
위치	직위
플로트	styleFloat
텍스트 정렬	텍스트 정렬
텍스트 장식	텍스트 장식
텍스트 장식: 깜박임	textDecorationBlink
텍스트 장식: 줄넘기	textDecorationLineThrough
텍스트 장식: 없음	textDecorationNone
텍스트 장식: 윗줄	textDecorationOverline
텍스트 장식: 밑줄	textDecorationUnderline
텍스트 들여쓰기	텍스트 들여쓰기
텍스트 변환	텍스트변형
상단	상단
세로 정렬	세로정렬
가시성	가시성
너비	너비
z-색인	z인덱스

사용방법

인터넷 익스플로러

document.all.div_id.style.JS_property_reference = "new_CSS_property_value";

이전 Netscape(4.7 이하)

document.div_id.JS_property_reference = "new_CSS_property_value";

Netscape 6.0 및 Opera(및 기타 Mozilla)

document.getElementById(div_id).style.JS_property_reference = "new_CSS_property_value";

최신 Mozilla의 "getElementById()" 참조에서는 대괄호 대신 괄호를 사용합니다.