使用 JavaScript 来检索 css 元素而不是 html答案

【问题标题】：Using JavaScript to retrieve css elements instead of html使用 JavaScript 来检索 css 元素而不是 html
【发布时间】：2017-04-22 03:02:36
【问题描述】：

我了解 document.querySelector 的工作原理，以便在 .html 文件本身中检索 css 元素，但如何从 .css 文件中检索内容？

我的 .css 文件示例：

canvas {
background-color: DarkBlue;
}

还有我在 .js 文件中的内容（我知道它只适用于 HTML，所以我想知道 CSS 的等价物，我不想在 HTML 文件中设置样式，我想保留单独的 CSS 文件):

var canvas = document.querySelector('canvas');

【问题讨论】：

你要检索html元素的css属性吗？
I understand how document.querySelector works in order to retrieve a css element within the .html file itself - 显然你不明白 querySelector 做了什么 - 它使用 css 选择器检索 HTML 元素 - 而不是“css 元素” - 如果你想获得“计算” css一个元素，使用 getComputedStyle 或 getDefaultComputedStyle - 请参阅文档以了解区别
css 元素，除了伪元素，实际上并不存在。它们仍然是 HTML 元素。您只是按他们的班级选择他们

标签： javascript html css

【解决方案1】：

您不会想要解析 CSS 文件，尽管您可以。最好先用 javascript 即 canvas 获取元素，然后再用 JS 获取该元素的样式。

这之前在这里得到了很好的回答，并提供了一个很好的函数来使它更容易一点： JavaScript get Styles

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

var elementFontSize = getStyle(document.getElementById("container"), "font-size");

祝你好运。

【讨论】：