Question

我有点问题。当我使用某个属性设置css规则时，例如，在外部.css文件中使用background-image，然后尝试使用另一个外部.js文件中的javascript访问它，它不起作用。也就是说我对document.getElementById(someId).style.backgroundImage.

没有任何价值

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

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

Answer 1

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

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

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

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

Answer 2

如果您尝试访问样式表中的css属性集，而不是内联样式属性，使用document.defaultView.getComputedStyle（除了9以下的IE以外的任何东西）或旧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的， '字体大小'）

Answer 3

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

Answer 4

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

Answer 5

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

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

Answer 6

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

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

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

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

如何通过外部CSS文件应用javascript访问css属性？

6 个答案: