jquery捕獲生成的CSS？

Question

我正在處理一個小小的CSS/JavaScript玩具，其中滑塊給用戶控制屏幕上元素的CSS屬性。我在想，有可能是一種方式，jQuery來提取當前風格的元素 - 我知道我可以做這樣的事情

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

獨立訪問過，但是這將是巨大的，如果我能得到所有一次適用於對象的樣式。可能？ （愚蠢的想法？）

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。

Answer 2

您可以獲取當前設置內嵌樣式像這樣的元素：

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

當然你必須解析自己。

Answer 3

鑑於假設加價：

<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。

上面基本上解析了元素的內聯樣式，因爲這是jQuery（和JavaScript作爲一個整體）使其效果已知的地方。可以訪問window.getComputedStyle()，但這看起來有點超出您的需要，因爲我可以告訴您要顯示由您的頁面上的工具創建的CSS。