2011-12-02 3 views
0

나는 슬라이더가 화면에 요소의 CSS 속성을 통해 사용자가 제어 할 수 있도록 약간의 CSS/자바 스크립트 장난감 일하고 있어요. 내가jquery는 CSS를 생성합니까?

$("#foo").css("bar") 

같은 작업을 수행하여 독립적으로 액세스 할 수 있다는 사실을 알고하지만 전혀 얻을 수 있다면 그것은 좋은 것입니다 - 나는 요소의 현재 스타일을 추출하기 위해 jQuery를에있을 수있는 방법을 생각했다 하나의 개체에 적용된 스타일이 급습했습니다. 가능한? (멍청한 아이디어?) 당신은이 같은 요소에 대한 현재 설정되어있는 인라인 스타일을 얻을

+0

그것은 당신이 아직 답변 중 하나를 시도했다 확실히 가능? –

답변

1

, 당신이 사용할 수

var str = $("#element").attr("style"); 
var style = str.split(";"); 
for(i=0;i<=style.length;i++){ 
    alert(style[i]); 
} 

Example합니다.

1

을 할 수 있습니다 : 당신이 가진 것 물론

$("#foo").attr("style"); 

자신 있음을 구문 분석.

$("#element").attr("style"); 

을 위하고 넘어 갈 :이 인라인 CSS가 있다면

0

을 감안할 때 가상의 마크 업 : 그것은 비록 분명히 매우 고통스러운, 확실히 가능

<span id="test">Some content of 'test'</span> 
<pre id="css"></pre> 

:

$('#test').css({'background-color':'red','color':'white','display':'block'}); 
var $elem = $('#test'); 
var styles = document.getElementById('test').style; 
var prop; 

for(var i=0;i<styles.length;i++){ 
    prop = $elem[0].style[styles[i]]; 
    console.log(styles[i] + ': ' + prop); 
} 

JS Fiddle demo.

개정 위의 (다소) 정제 된 버전 :

$('#test').css({'background-color':'red','color':'white','display':'block'}); 

var elem = document.getElementById('test'); 
var styles = document.getElementById('test').style; 
var prop; 

if (styles.length){ 
    $('#css').append('<ul></ul>'); 
    for(var i=0;i<styles.length;i++){ 
     prop = elem.style[styles[i]]; 
     $('<li />').text(styles[i] + ': ' + prop + ';').appendTo('#css ul'); 
    } 
} 

JS Fiddle demo. (전체 및 JavaScript)를 JQuery와 그 효과가 알려져 있습니다 어디 그 이후

위의 본질적 요소의 인라인 스타일을 분석합니다. window.getComputedStyle()에 액세스 할 수 있지만, 지금까지 내가 말할 수있는 당신이 당신의 페이지에 도구에 의해 생성 된 CSS를 보여주고 싶은 때문에 즉, 당신이 필요로하는 것보다 조금 더 많은 것 같다.