.css (propertyName) 정보
jQuery .css (propertyName)본문
.css (propertyName)
설명 : 일치하는 요소 집합의 첫 번째 요소에 대해 계산 된 스타일 속성을 가져옵니다.
이 .css()방법은 브라우저가 첫 번째로 일치하는 요소에서 계산 된 스타일 속성을 얻는 편리한 방법입니다 (특히 getComputedStyle()브라우저 가 버전 9 이전의 Internet Explorer 버전 currentStyle과 표준 브라우저 의 메서드에 비해 해당 속성의 대부분에 액세스하는 방식에 비추어 볼 때). runtimeStyle) 및 다른 용어 브라우저는 특정 속성을 사용합니다. 예를 들어 Internet Explorer의 DOM 구현은 해당 float속성을 styleFloat참조하며 W3C 표준 준수 브라우저는이를 참조합니다 cssFloat. 일관성을 위해 간단하게 사용할 수 있습니다. "float"jQuery는이를 각 브라우저의 올바른 값으로 변환합니다.
또한 jQuery는 다중 단어 속성의 CSS 및 DOM 형식을 동일하게 해석 할 수 있습니다. 예를 들어, jQuery를 이해하고 모두 올바른 값 반환 .css( "background-color" )및 .css( "backgroundColor" ). 즉, 대소 문자가 혼합 된 경우에는 특별한 의미가 있으며 예를 들어 .css( "WiDtH" )같은 것을하지 않습니다 .css( "width" ).
요소 의 계산 된 스타일 은 스타일 시트의 해당 요소에 대해 지정된 값과 다를 수 있습니다. 예를 들어 계산 된 스타일 치수는 거의 항상 픽셀이지만 스타일 시트에서 em, ex, px 또는 %로 지정할 수 있습니다. 다른 브라우저는 논리적이지만 문자가 같지 않은 CSS 색상 값을 반환 할 수 있습니다 (예 : #FFF, #ffffff 및 rgb (255,255,255)).
속기 CSS 속성의 검색 (예를 들면, margin, background, border), 일부 브라우저와 기능을하지만, 보장 할 수 없습니다. 예를 들어 렌더링 된 내용을 검색 border-width하려면 : $( elem ).css( "borderTopWidth" ), $( elem ).css( "borderBottomWidth" )등을 사용 합니다.
엘리먼트를 호출 할 때 DOM에 연결되어야 .css()합니다. 그렇지 않으면 jQuery에서 오류가 발생할 수 있습니다.
jQuery 1.9 에서 스타일 속성 배열을 전달하면 .css()속성 - 값 쌍의 객체가 생성됩니다. 예를 들어 네 개의 렌더링 된 border-width값을 모두 검색 하려면 사용할 수 있습니다 $( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]).
예 :
클릭 된 div의 배경색을 가져옵니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<style>
div {
width: 60px;
height: 60px;
margin: 5px;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<span id="result"> </span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script>
$( "div" ).click(function() {
var color = $( this ).css( "background-color" );
$( "#result" ).html( "That div is <span style='color:" +
color + ";'>" + color + "</span>." );
});
</script>
</body>
</html>
0
댓글 0개