是否可以使用javascript或jquery遍历div的样式属性？

Question

正如标题所说，我想知道是否可以使用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');

对此的任何意见都表示赞赏。

Answer 1

这样做你想要的吗？

var parts = style.split(";")
var obj = {}
for (var i=0;i<parts.length;i++) {
  var subParts = parts[i].split(':');
  obj[subParts[0]]=subParts[1];
}

Answer 2

对于<div id="id" style="color: red"/>，$('#id').attr('style')会返回一个字符串color: red，所以我想，你不能直接循环它们。

但是，您可以创建一个数组string.split(';')并循环它们。

但是在内部<style>标记或某个css文件中关联的CSS，我认为你无法得到它。但是，我不确定。