테스트 사이트 - 개발 중인 베타 버전입니다
SIR

.css (propertyName)

수다왕
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 8년 전 · 1954

.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">&nbsp;</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>

목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
15935
jQuery jQuery ( ": first-child") 1
15934
jQuery .first()
15933
jQuery .finish ([queue])
15932
jQuery .find (selector)
15931
jQuery .filter (selector)
15930
jQuery jQuery ( ": file")
15929
jQuery .fadeToggle ([duration] [, easing] [, complete])
15928
jQuery .fadeTo( duration, opacity [, complete ] )
15924
jQuery .fadeOut ([duration] [, complete])
15923
jQuery .fadeIn ([duration] [, complete])
15922
jQuery event.which
15921
jQuery event.type
15920
jQuery event.timeStamp
15919
jQuery event.target
15917
jQuery event.stopPropagation ()
15916
jQuery event.stopImmediatePropagation ()
15915
jQuery event.result
15914
jQuery event.relatedTarget
15913
jQuery event.stopImmediatePropagation()
15912
jQuery event.result
15911
jQuery event.relatedTarget
15910
jQuery event.preventDefault ()
15909
jQuery event.pageY
15908
jQuery event.pageX
15907
jQuery event.namespace
15906
jQuery event.metaKey
15901
PHP 테이블에서 동적 rowspan 만들기 5
15900
기타 vi 명령모드
15899
기타 vi 입력모드
15898
기타 vi의 세가지 모드
이전 다음
전체 목록