将CSS值存储在JavaScript变量中

Question

我的CSS

.h1-modified{
    color: green;
}

我的JavaScript文件

var h1Modified = [HERE IS SOME CODE MISSING];

我想将HTML类.h1-modified的颜色存储在JavaScript变量h1Modified中。

如果有效，alert(h1Modified);将输出green。

问题：.h1-modified未分配给任何HTML元素。我必须直接访问CSS文件。

Answer 1

因此，如果您想读取CSS属性。.我认为您不能直接从CSS读取它，但是可以从具有此类的元素中读取它

const tag = document.getElementById('my_id');
const styles = window.getComputedStyle(tag);
const tagColor = style.getPropertyValue('color');

您可以在此处了解更多信息：CSSStyleDeclaration。

或者您也可以从elemenet中读取颜色

const color = document.getElementById("tag").style.color;

PS：哦，您需要解析CSS文件吗？好吧，解析器可用任何语言提供，JavaScript就是其中之一。看一下JSCSSP。它可以解析CSS文件，但是请记住，该解析文件不一定与用于呈现网站的文件相同。否则该文件中找到的样式将应用于您的HTML标记。

Answer 2

我知道有人已经回答了。但这是一个Jquery版本：

$('#id').css('color', 'blue'); //To change

存储为var：

var x = $('#id').css('color');  //will return the colour

参考：

http://api.jquery.com/css/