2012-06-09 3 views
9

나는 question와 동일한 질문을받습니다. (의견을 말할 수 없었거나 권한이 없습니다.) CSS에서 정의 된 CSS 값을 가져오고 싶습니다. 내가 뭔가를 할 경우 DOM의 모든 요소에 적용 (반응하는 미디어 쿼리 그리드와의 부트 스트랩 CSS는)jquery - 아직 적용되지 않은 클래스에 대한 CSS 속성 값을 가져옵니다.

.span6 { 
width: 570px; 
} 

그러나 그러나이

$('<div/>').addClass('span6').width(); 

처럼 위의 질문 리턴를 참조 0 예에서 제공하는 솔루션은 작동 좋아요

div를 추가하지 않고도 쉬운 방법일까요?

var getCSS = function (prop, fromClass) { 

    var $inspector = $("<div>").css('display', 'none').addClass(fromClass); 
    $("body").append($inspector); // add to DOM, in order to read the CSS property 
    try { 
     return $inspector.css(prop); 
    } finally { 
     $inspector.remove(); // and remove from DOM 
    } 
}; 

jsFiddle here

+0

당신은 정말 (정말) 요소를 삽입하지 않도록하려는 경우, 당신은 당신이 필요로하는 폭을 가진지도를 만들 수 있습니다 : P – leopic

+0

를 왜 그렇게 하시겠습니까? 어쩌면 문제를 해결할 수있는 대체 방법/쉬운 방법이 있을까요? –

+0

"jquery로 스타일 속성 가져 오기"질문을 마지막으로 접했을 때 허용 된 대답으로 일부 정규식이 끝났습니다. 현재 솔루션은 충분히 간단하다고 생각합니다. '.remove()'를 호출하여 원하는 CSS 속성 값을 얻은 후에 DOM을 지우거나, CSS를 적용하고 그 값을 가져 와서 나중에 적용된 CSS 클래스를 제거하는'display : none' 요소를 항상 가질 수 있습니다. –

답변

28

호세. 더 복잡한 CSS 선택기를 사용하도록 수정했습니다.

var getCSS2 = function (prop, fromClass, $sibling) { 

    var $inspector = $("<div>").css('display', 'none').addClass(fromClass); 
    if($sibling != null){ 
     $sibling.after($inspector); //append after sibling in order to have exact 
    } else { 
     $("body").append($inspector); // add to DOM, in order to read the CSS property 
    } 
    try { 
     return $inspector.css(prop); 
    } finally { 
     $inspector.remove(); // and remove from DOM 
    } 
}; 

JSFiddle

+1

기본적으로 OP가 수행하는 작업입니다.'.css ('display', 'none')'은 .hide()와 거의 동일하지만, 가능한 함수로 확장하려면 +1, 'return'다음에 실행됩니다. –

+0

은 "쓰기가 적고 jquery를 더 많이 수행"하는 유일한 방법 일 수 있습니다 : P –

+0

'background-position'을 시도했지만 실제 값 대신'0 % 0 %'를 반환합니다. .. –

4

멋진 답을함으로써 : 당신이 그것을 제거 동적 마지막으로, DOM에 숨겨진 요소를 삽입 속성을 읽을 필요가 CSS 속성 값을 읽기 위해서는

관련 문제