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; Commented 30 окт. 2015 в 10:24
  • да не в чем это как ссылка на объект classes[x], просто для наглядности! Я не пишу на javascript, этот кода я написал за час, дабы просто решить поставленную задачу. Попозже я перепишу, и оптимизирую как разберусь с проблемой. А сам объект вычисляется в зависимости от места нахождения, либо в текущем html файле либо в css.
    – Denis. I.
    Commented 30 окт. 2015 в 10:27
  • за использование eval я бы руки отрывал xDDD почитать тут Commented 30 окт. 2015 в 10:27
  • Google Chrome 46 проблема не вопспроизводится. Все работает Commented 30 окт. 2015 в 10:32
  • Версия 46.0.2490.80 m у меня в google chrome не работает! квадрат остается синим в место черного!
    – Denis. I.
    Commented 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.
    Commented 30 окт. 2015 в 10:50
  • @Denis.I. Если ответ получен в полной мере, не оставляйте вопрос открытым. Закройте его кликнув по галочке.... И да.... используйте eval только тогда, когда без них просто невозможно обойтись. Иначе будут последствия. Почитайте об этом Commented 4 нояб. 2015 в 16:13

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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