2010-08-23 2 views
12
나는 "스타일"속성의 무언가를 추출해야

에서 속성을 얻을 :은 "정상"과 "왼쪽"속성jQuery를 스타일

<div style="top: 250px; left: 250px;" id="1" class="window ui-draggable"> 

jQuery를 함께이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 쉬운 방법이 있습니까, 아니면 문자열 함수에 의존해야합니까?

답변

31

그것은 당신이 필요 따라 달라집니다. 계산 된 값이 필요한 경우 (예 : 브라우저가 모든 스타일 시트를 구문 분석 후 사용되는 실제 값은 - !important에 의해 무시되었다 않는 - 그것은 픽셀 값이 있다면 그것은 항상하여 style 속성에 지정된 하나가 될 것입니다,

$("#element_1").css("top") 
$("#element_1").css("left") 

를 사용 스타일 시트의 문. 명시 적으로이 요소의 style 속성에 지정된 값을 필요 경우

jQuery docs for .css()

, 그들이 style 속성에 지정되지 않은 경우

$("#element_1")[0].style.top 
$("#element_1")[0].style.left 

.css()는 달리,이 값이 비어 있습니다 사용합니다.

+0

을 그냥 확실하게 : 요소의 스타일 객체를 통해 속성에 접근 할 것인가 * 또한 계산 된 값을 반환 할 것인가? – Tomalak

+0

@Tomalak 아니요,'style'은'style ='로 명시 적으로 지정된 값을 줄 것입니다. –

1

CSS 속성은 표준 DOM의 속성을 통해 액세스 할 수 있습니다 (ID element_1를 사용하여가 ID가 1 명명 할 수 없습니다), "1"는 유효한 HTML 요소 여담으로

alert($("#theElement")[0].style.top) // "250px" 
alert($("#theElement")[0].style.left) // "250px" 

아니다 신분증. 정수 + 픽셀을 반환에 .css()를 사용하여

var topValue = $(this).css("top"); //Change the selector to meet your needs 
var leftValue = $(this).css("left"); //Change the selector to meet your needs 
4

당신은 CSS 기능을 사용할 수 있습니다

var yourVar = parseInt($('selector').css('top'), 10); 
1

,하지만 당신은 쉽게 수행하여 좋은 깨끗한 정수를 얻을 수 있습니다 :