Я пытаюсь создать ярлык с помощью javascript, но похоже, что CSS не применяется.
Пример кода (протестирован в Chrome):

<html>  
<head>  
<style type="text/css">  
#wrapper {  
    width:700px;  
}  
#form_groups .label {  
    float:left;  
    clear:left;  
    width:180px;  
    margin-right:3px;  
    margin-top:2px;  
    background-color:red;  
}  

#the_id {  
    background-color: #FBEF99;  
    font-family:"Lucida Console", Monaco, monospace;  
    font-size: .9em;  
    width: 300px;  
    margin-top: 2px;  
}  
</style>  
</head>  
<body>  
<input type="submit" value="Create" onclick="createForm()"/>  
<div id="wrapper">  
<form id="form_groups" action="">  
    <label class="label">Id</label>  
    <input id="the_id" type="text" value="1">     
</form>  
</div>  

<script type="text/javascript">  
function createForm () {  
    var wrapper = document.getElementById('wrapper');  
    var form = document.getElementById('form_groups');  
    wrapper.removeChild(form);       
    form = document.createElement('form');  
    form.id='form_groups';  
    var lbl = document.createElement('label');  
    lbl.textContent = 'Name';  
    lbl.class = 'label';      
    var name = document.createElement('input');  
    name.type = 'text';  
    name.id='the_id';       
    form.appendChild(lbl);  
    form.appendChild(name);     
    wrapper.appendChild(form);  
}  
</script>  
</body>  
</html>

Текст получает CSS, а метка - нет, когда я нажимаю кнопку Create.
Есть ли ограничение при динамическом назначении стиля с использованием атрибута class через javascript?

0
Cratylus 6 Июн 2013 в 00:32
2
class - зарезервированное слово в JavaScript, а свойство, которое вам нужно, - className.
 – 
zzzzBov
6 Июн 2013 в 00:34

1 ответ

Лучший ответ

Вы должны использовать className, а не class.

lbl.className = 'label'; 

Современные браузеры поддерживают classList.

lbl.classList.add("label");
6
epascarello 6 Июн 2013 в 00:34