如何在jQuery中動態設置內聯樣式的CSS？

Question

我希望獲得動態設置的所有樣式（適用於內聯樣式）。

例如

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

我想在JS變量中獲取style屬性的值並保存它。 我嘗試過使用jQuery的.attr （'style'），但是它給出了undefined

此外，如此處所建議如何從元素中獲取內聯CSS樣式屬性

getComputedStyle

但要獲得樣式，我需要提到所有樣式

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

但是用戶可以動態設置各種樣式。 那么，我是否需要單獨提及所有內聯樣式，還是有更好的方法來實現它？

在此先感謝您的幫助

更新虛空的評論：

如上所述， jQuery可以獲得與元素相關的所有CSS樣式嗎？

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

您可以迭代元素的'style'字段下可用的對象，如下所示：

警告該對象還包含所有可能的元素樣式（使用非數字屬性鍵），因此循環使用例如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
}