0

css: .test { width :200px; height:200px;
background-color:#33557b; }

<head>
<link rel="stylesheet" type="text/css" href="my.css">
<script type="text/javascript">
 function SetStyle(className, key, value) 
 {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) 
    {
        if (classes[x].selectorText == className)
        { 
             var y = classes[x].style ? classes[x].style : classes[x].style;
             y[key] = value; 
        }
    }
  }
</script>
</head>
<body>
<div class = "test">
</div>
<script>
  eval(SetStyle(".test", 'backgroundColor', '#000'));
</script>
</body>

Суть такая: хочу динамически менять свойства объекта в css, например будь то фон или еще что. Так вот, написал код что выше - в IE и FireFox запускается нормально, а в Google Chrome данный код не отрабатывает! В Chrome выскакивает ошибка, мол classes.lenght = Uncaught TypeError: Cannot read property '0' of null. Как исправить данную проблему?

Поясню: создается квадрат синим цветом; после отработки javascript - он становится черным (по логике так должно быть). Прошу помощи комрады!

7
  • Могли бы для меня пояснить, в чем смысл использования здесь тернарного оператора var y = classes[x].style ? classes[x].style : classes[x].style; 30 окт 2015 в 10:24
  • да не в чем это как ссылка на объект classes[x], просто для наглядности! Я не пишу на javascript, этот кода я написал за час, дабы просто решить поставленную задачу. Попозже я перепишу, и оптимизирую как разберусь с проблемой. А сам объект вычисляется в зависимости от места нахождения, либо в текущем html файле либо в css.
    – Denis. I.
    30 окт 2015 в 10:27
  • за использование eval я бы руки отрывал xDDD почитать тут 30 окт 2015 в 10:27
  • Google Chrome 46 проблема не вопспроизводится. Все работает 30 окт 2015 в 10:32
  • Версия 46.0.2490.80 m у меня в google chrome не работает! квадрат остается синим в место черного!
    – Denis. I.
    30 окт 2015 в 10:36

1 ответ 1

2

Если вам нужно применять произвольный стиль к произвольному классу элемнтов то вот:

function SetStyle(className, key, value) {
    var el = document.getElementsByClassName(className);

    for (var i = 0; i < el.length; ++i) {
        el[i].style[key] = value;
    }
}


    SetStyle("test", 'backgroundColor', '#000');
.test {
  background-color: red;
  color: white;
}
<div class="test">test div</div>

Если вы хотите применять это к классу, который у вас равен classname, то код

var el = document.getElementsByClassName(className);

for (var i = 0; i < el.length; ++i) {
    el[i].style[key] = value;
}

надо будет применять в блоке с

if (classes[x].selectorText == className)

Конечно же проверяя изначально что у вас сам classess не null

2
  • Спасибо добрый человек!
    – Denis. I.
    30 окт 2015 в 10:50
  • @Denis.I. Если ответ получен в полной мере, не оставляйте вопрос открытым. Закройте его кликнув по галочке.... И да.... используйте eval только тогда, когда без них просто невозможно обойтись. Иначе будут последствия. Почитайте об этом 4 ноя 2015 в 16:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.