DHTML с Javascript и CSS не работает - PullRequest
Новая
       153

DHTML с Javascript и CSS не работает

0 голосов
/ 12 апреля 2010

Так что по какой-то причине этот ненавязчивый код javascript не работает, и я не могу понять, почему он не работает.

Я динамически изменяю className элемента div и, следовательно, ожидаю, что CSS отразит это изменение. Однако это не так. Вот упрощенный код.

HTML: 

<head>
    <title>Your Page</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="us.js"></script>
</head>

<body>
  <div id="wrapper">    
    <h1 id="title">Your Page</h1>   
  </div>
</body>

JavaScript: 

window.onload = function() {
  document.getElementById("wrapper").className = "2";
}

CSS: 

#wrapper{
    background-color: white;
}

#wrapper.1 {
    background-color: black;
}

#wrapper.2 {
    background-color: red;
}

#wrapper.3 {
    background-color: blue;
}

Я смотрю на div оболочки в firebug, и он показывает, что класс меняется на "2". Тем не менее, веб-страница не отражает это путем изменения цвета фона на красный. (Это также не работает с изменением цвета текста. Я попробовал это.). Я знаю, что CSS загружается правильно. Так в чем же проблема?

Ответы [ 3 ]

4 голосов
/ 12 апреля 2010

Ваши имена классов CSS должны начинаться с буквы, например: 

#wrapper.num1 {
    background-color: black;
}

#wrapper.num2 {
    background-color: red;
}

#wrapper.num3 {
    background-color: blue;
}
1 голос
/ 12 апреля 2010

2 - недопустимое имя класса. Ваше имя класса не может быть числом; это должна быть буквенно-цифровая строка, начинающаяся с буквы.

1 голос
/ 12 апреля 2010

Вы пытались использовать другое имя класса? Проверьте Какие символы допустимы в именах / селекторах классов CSS? . Имена классов CSS не могут начинаться с цифр.

...