jqueryがcssを生成しましたか？

Question

私は、スライダーが画面上の要素のCSSプロパティを制御できるようにする小さなCSS/javascriptのおもちゃに取り組んでいます。私は、要素の現在のスタイルを抽出するためのjQueryでの方法があるかもしれないと考えていた - 私は

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

ような何かをすることによって独立してそれらにアクセスすることができます知っている。しかし、私は全く得ることができれば、それは素晴らしいことです1つのオブジェクトに適用されたスタイルのうちの1つが急増しました。可能？ （？ダムアイデア）

Answer 1

それは、インラインCSSなら、あなたはこの使用できます。

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

を、上に行くと超えたために：

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

Example。どうやらかなり曲がりくねったものの

<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

Answer 2

あなたはこのような要素のために現在設定されているインラインスタイルを取得することができます：あなたがいることを自分自身を解析する必要があると思います。もちろん、

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

を。

Answer 3

は架空のマークアップを考えます。

改訂及び上記の（わずかに）精製されたバージョン：

$('#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。

上記は基本的に要素のインラインスタイルを解析します。これは、jQuery（およびJavaScript全体）がその効果を知らせるためです。 window.getComputedStyle()にアクセスすることは可能ですが、これはあなたのページにツールで作成されたCSSを表示したいと思っている限り、必要以上のものです。