Question

我希望获得动态设置的所有样式（适用于内联样式）。

例如

<span class="text" style="color: rgb(128, 128, 255); font-size: 24px;">Name</span>

我想在JS变量中获取style属性的值并保存它。我尝试过使用jQuery的.attr（'style'），但是它提供了 undefined

此外，正如此处How to get inline CSS style property from element建议使用

getComputedStyle

但要获得样式，我需要提及所有样式，如

var el = document.querySelector("selector")
console.log(el.style.SomeStyle);

但是用户可以动态设置各种样式。那么，我是否需要单独提及所有内联样式，还是有更好的方法来获得它？

提前感谢您提供任何帮助

从void's评论更新：

如此处所述Can jQuery get all CSS styles associated with an element?

marknadal编写了一个函数来检索内联和外部样式，但我只需要内联样式而不管所有附加的css类

Answer 1

您可以使用getAttribute：

const el = document.querySelector('my-element');
const styleStr = el.getAttribute('style');

例如，以下内容：

<div style="color:blue;display:flex;"></div>

会产生：

'color:blue;display:flex;'

然后您可以根据需要使用正则表达式或其他东西来解析它。我建议转换为数组或类似结构而不是对象，因为您可能不确定可用的值是什么（这是一种简单的方法，并且可能有很多更有效的方法来分解它。我会把它分给你）：

// gives [ ['color', 'blue'], ['display', 'flex'] ]
str.slice(0, str.length - 1).split(';').map(x => x.split(':'))

您可以转换为对象，并使用for in循环以及obj.hasOwnProperty(key)。

jQuery替代方案：

const els = $('my-element');
els.each((i, el) => {
  const styleStr = els.attr('style');
  const styles = styleStr.slice(0, styleStr.length - 1).split(';').map(x => x.split(':'));
});

Answer 2

您可以按照以下方式迭代元素的“样式”字段下可用的对象：

警告该对象还包含所有可能的元素样式（使用非数字属性键），因此循环使用例如for（sth in styles）不会工作。您需要以类似于数组的方式迭代样式，如下所示。

var el = document.querySelector("selector");
var styles = el.style;

for (var i = 0, len = styles.length; i < len; ++i) {
    var name = styles[i];
    var value = styles[value];

    console.log(name); // shows style name, e.g.: color, padding, etc
    console.log(value); // shows style value, e.g.: #fff, 20px, etc
}

如何在jQuery中动态设置内联样式的CSS？

2 个答案: