通过外部 CSS 文件应用时如何在 javascript 中访问 css 属性？答案

【问题标题】：How to access css properties in javascript when applied via external CSS file?通过外部 CSS 文件应用时如何在 javascript 中访问 css 属性？
【发布时间】：2021-01-16 19:20:35
【问题描述】：

我有一个小问题。当我使用某个属性（例如，外部 .css 文件中的背景图像）设置 css 规则，然后尝试在另一个外部 .js 文件中使用 javascript 访问它时，它不起作用。也就是说我没有得到document.getElementById(someId).style.backgroundImage.的任何价值

但是当我在 html 文件本身中使用 style 属性设置 css 规则时，它可以工作。

所以，如果在外部 .css 文件中设置了 css，我的查询是不能访问 js 中的 css 属性。

【问题讨论】：

文档中指定的规则与外部指定的规则没有区别。您确定外部 CSS 文件已正确包含，并且您是否正在等待通过 onload 加载它？
确认您的 document 对象是同一个对象，但可能不是。您是否在不同的窗口/框架中运行命令？
您的 javascript 是在渲染 DOM 之前运行（直接通过 HTML 加载或包含 .js 文件），来自 onload 事件，还是稍后在单击按钮时运行？
是的，外部 css 文件已正确加载，并且正常加载不是通过 onload。是的，javascript 是在加载 DOM 之前运行的。在 onmouseover、onmouseout 和 onClick 等事件上调用 js。
如果您的问题得到解决，您可以接受答案。

标签： javascript html css

【解决方案1】：

您只能访问通过 Javascript（或 style attr）设置的 Javascript 样式属性。

要访问元素的当前样式，您应该获取元素的 computed style。

var el = document.getElementById('hello');
var comp = el.currentStyle || getComputedStyle(el, null);
alert( comp.backgroundColor );

请注意，计算的样式在浏览器中可能变化（例如颜色为十六进制或 rgb），因此如果您想要统一的结果，您应该规范化。

【讨论】：

我一直想知道为什么我无法使用 Javascript 访问当前样式。我也从来不知道这种方法。非常感谢！
这应该是公认的答案。这个问题也在这里得到了回答stackoverflow.com/questions/1193409/…

【解决方案2】：

如果您尝试访问样式表中设置的 CSS 属性，而不是内联样式属性，使用 document.defaultView.getComputedStyle （除了 IE 9 以外的任何东西）或旧版 IE 中的 element.currentStyle。

例如：

function deepCss (who, css){
    var dv, sty, val;
    if(who && who.style){
        css= css.toLowerCase();
        sty= css.replace(/\-([a-z])/g, function(a, b){
            return b.toUpperCase();
        });
        val= who.style[sty];
        if(!val){
            dv= document.defaultView || window;
            if(dv.getComputedStyle){
                val= dv.getComputedStyle(who,'').getPropertyValue(css);
            }
            else if(who.currentStyle){
                val= who.currentStyle[sty];
            }
        }
    }
    return val || '';
}

deepCss(document.body,'font-size')

【讨论】：

对不起，我不明白这个功能和它的用途。

【解决方案3】：

style 属性可用于设置样式和检索内联样式值，但它不能检索在外部样式表中设置的样式值。

someElement = document.getElementById("element");
myStyles = document.defaultView.getComputedStyle(someElement,null);
backgroundImage = myStyles.getPropertyValue("background-image"); // w3c
backgroundImage = someElement.currentStyle["background-image"]; //IE

【讨论】：

【解决方案4】：

您是否尝试在实际呈现/DOM 准备好之前检索该属性？尝试在 body 的 onload 事件中执行此操作，或者如果您使用的是 jQuery，请尝试在 $(document).ready() 中执行此操作。

【讨论】：

与onload无关。在写这篇文章之前你有没有测试过什么？

【解决方案5】：

您可以使用 jquery 进行编辑。参考http://api.jquery.com/css/

【讨论】：

【解决方案6】：

这是访问外部 CSS 属性的方法。你可以试试这个。

var x = document.getElementById('someId');

var getProperty = window.getComputedStyle('x');

var getImage = getProperty.getPropertyValue('background-image');

【讨论】：

感谢编辑使其更具可读性。