javascript - 如何在 jQuery 中获取所有动态设置的内联样式 CSS？

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(':'));
});