相关疑难解决方法(0)

许多工具/ API提供了选择特定类或ID元素的方法.还可以检查浏览器加载的原始样式表.

但是,对于浏览器呈现元素,它们将编译所有CSS规则(可能来自不同的样式表文件)并将其应用于元素.这就是您在Firebug或WebKit Inspector中看到的内容 - 一个元素的完整CSS继承树.

如何在纯JavaScript中重现此功能而无需其他浏览器插件？

也许一个例子可以为我正在寻找的东西提供一些澄清:

<style type="text/css">
    p { color :red; }
    #description { font-size: 20px; }
</style>

<p id="description">Lorem ipsum</p>

这里p#描述元素应用了两个CSS规则:红色和20像素的字体大小.

我想找到这些计算出的CSS规则源自的来源(颜色来自p规则等).

如何在JavaScript中检索已应用于元素的样式,不包括默认的用户代理样式(仅限内联+样式表样式).

基本上,您可以在您最喜欢的开发人员工具的Computed选项卡中看到所有用户样式:

没有框架,IE8 +,Edge,Chrome和Firefox.

我希望答案是getComputedStyle减去getDefaultComputedStyle的结果,但是以跨浏览器的方式.看到所有开发人员工具都能够做到这一点,必须有一个解决方案:)

正如标题所说,我想知道是否可以使用javascript或jquery遍历div的样式属性.我想要做的是遍历样式并创建一个包含这些样式名称和值的对象.

这是我想要做的一个例子:

alert($('#mydiv').attr('style'));

给出以下内容:

background-color: #CCCCCC; border-width: 2px; border-style: solid; width: 250px;

我想创建一个如下所示的对象:

{"background-color":"#CCCCCC","border-width":"2px","border-style":"solid","width":"250px"}

我无法弄清楚这是通过循环样式是否可以实现,或者我是否必须使用类似于下面的代码自己创建对象:

var style = {};

style['width'] = $('#mydiv').css('width');

任何意见的输入将不胜感激.