.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>
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 4766 | jQuery | 8년 전 | 1679 | ||
| 4765 | jQuery | 8년 전 | 1350 | ||
| 4764 | jQuery | 8년 전 | 2166 | ||
| 4763 | jQuery | 8년 전 | 1855 | ||
| 4762 | jQuery | 8년 전 | 1632 | ||
| 4761 | jQuery | 8년 전 | 1934 | ||
| 4760 | jQuery | 8년 전 | 1299 | ||
| 4759 | jQuery | 8년 전 | 1598 | ||
| 4758 | jQuery | 8년 전 | 1312 | ||
| 4757 | jQuery | 8년 전 | 1277 | ||
| 4756 | jQuery | 8년 전 | 1497 | ||
| 4755 | jQuery | 8년 전 | 1648 | ||
| 4754 | jQuery | 8년 전 | 1616 | ||
| 4753 | jQuery | 8년 전 | 1771 | ||
| 4752 | jQuery | 8년 전 | 1520 | ||
| 4751 | jQuery | 8년 전 | 1841 | ||
| 4750 | jQuery | 8년 전 | 1982 | ||
| 4749 | jQuery | 8년 전 | 1442 | ||
| 4748 | PHP | 8년 전 | 2810 | ||
| 4747 | jQuery | 8년 전 | 1392 | ||
| 4746 | jQuery | 8년 전 | 1648 | ||
| 4745 | jQuery | 8년 전 | 1655 | ||
| 4744 | jQuery | 8년 전 | 1536 | ||
| 4743 | jQuery | 8년 전 | 1614 | ||
| 4742 | jQuery | 8년 전 | 1706 | ||
| 4741 | jQuery | 8년 전 | 1598 | ||
| 4740 | jQuery | 8년 전 | 1607 | ||
| 4739 | jQuery | 8년 전 | 1798 | ||
| 4738 | jQuery | 8년 전 | 1312 | ||
| 4737 | jQuery | 8년 전 | 2098 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기