Question

我正在开发一个小的css / javascript玩具，其中滑块让用户可以控制屏幕上元素的css属性。我在想jQuery中可能有一种方法来提取元素的当前样式 - 我知道我可以通过执行类似

的操作来独立访问它们

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

但如果能够一举得到应用于物体的所有风格，那将会很棒。可能？（愚蠢的想法？）

Answer 1

您可以为以下元素获取当前设置的内联样式：

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

当然你必须自己解析。

Answer 2

如果是内联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 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。

jquery捕获生成的css？

3 个答案: