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

【问题标题】：Is it possible to loop through the style attributes of a div with javascript or jquery?是否可以使用 javascript 或 jquery 循环遍历 div 的样式属性？
【发布时间】：2011-04-01 06:21:09
【问题描述】：

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

我们将不胜感激。

【问题讨论】：

我不认为有一种方法可以遍历所有样式值，因为无论是否声明，它们都会在那里（即使你没有声明宽度，它仍然会有宽度）所以最好只使用第二种方法（创建对象）

标签： javascript jquery

【解决方案1】：

版本 1，使用内联样式

const style = $("#myDiv").attr("style");
const parts = style.split(";") 
console.log(parts)

let obj = {}
parts.forEach(part => {
  if (part.length > 0) { // skip the empty element after the last ;
    const [key,val] = part.split(':');
    obj[key] = val.trim();
  }  
})

console.log(obj)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="myDiv" style="background-color: #CCCCCC; border-width: 2px; border-style: solid; width: 250px;">My div</div>

版本 2 使用元素列表的计算样式

// more code needed to handle rgba
const rgbToHex = rgb => '#' + (rgb.match(/[0-9|.]+/g).map((x, i) => i === 3 ? parseInt(255 * parseFloat(x)).toString(16) : parseInt(x).toString(16)).join('')).padStart(2, '0').toUpperCase();


let obj = {}
const style = window.getComputedStyle(document.getElementById('myDiv')); // 
["background-color", "border-width", "border-style", "width"]
.forEach(rule => {
  const val = style.getPropertyValue(rule)
  obj[rule] = val.includes('rgb') ? rgbToHex(val) : val;
})

console.log(obj)

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

&lt;div id="myDiv"&gt;My div&lt;/div&gt;

【讨论】：

谢谢。我没想到会这样做

【解决方案2】：

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

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

但是在<style> 标签或一些css 文件中关联的CSS，我认为你不能得到它。但是，我不确定。

【讨论】：