Как получить доступ к свойствам CSS в javascript при применении через внешний файл CSS?

У меня небольшая проблема. Когда я устанавливаю правило css, используя какое-либо свойство, скажем, фоновое изображение во внешнем файле .css, а затем пытаюсь получить к нему доступ с помощью javascript в другом внешнем файле .js, он не работает. То есть я не получаю никакого значения для document.getElementById(someId).style.backgroundImage.

Но когда я устанавливаю правило css, используя атрибут style в самом файле html, он работает.

Итак, мой запрос: я не могу получить доступ к свойству css в js, если css установлен во внешний файл .css.

ОТВЕТЫ

Ответ 1

Вы можете получить доступ только к свойствам стиля в Javascript, которые были установлены через Javascript (или style attr).

Чтобы получить доступ к стилю текущего стиля, вы должны получить computed style элемента.

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

Обратите внимание, что вычисленный стиль может варьироваться в браузерах (например, цвет находится в шестнадцатеричном или rgb), поэтому вы должны нормализовать, если хотите получить унифицированные результаты.

Ответ 2

Если вы пытаетесь получить доступ к набору свойств CSS в таблице стилей, а не свойство встроенного стиля, используйте document.defaultView.getComputedStyle(ничего, кроме IE ниже 9) или element.currentStyle в старых IE.

например:

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, 'размер шрифта')

Ответ 3

Вы пытаетесь восстановить свойство до его фактического отображения /DOM готов? Попробуйте сделать это в теле onload, или если вы используете jQuery, $(document).ready().

Ответ 4

Вы можете использовать jquery для редактирования. См. http://api.jquery.com/css/

Ответ 5

свойство style можно использовать для установки стилей и получения встроенных значений стиля, но оно не может получить значения стиля, установленные во внешней таблице стилей.

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