javascript - 通过 javascript 中的类属性应用样式时是否有限制?

标签 javascript html css

我正在尝试通过 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>

当我按下按钮 Create 时,文本获得了 css 但标签没有。
通过 javascript 动态使用 class 属性分配样式时是否有限制?

最佳答案

你应该使用 className而不是 class

lbl.className = 'label'; 

现代浏览器支持 classList

lbl.classList.add("label");

关于javascript - 通过 javascript 中的类属性应用样式时是否有限制?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16949315/

相关文章:

javascript - Microsoft Graph API - v1.0/me/events 禁止 403

javascript - CKEditor ul 外壳

javascript - jQuery : Sum multiple select value if only selected

html - 调整超大屏幕视频高度

javascript - 在 Angular js中自动聚焦一行

javascript - Openlayers 3 - 弹出窗口 - 奇怪的错误

php - 如何返回多个值?

javascript - 如何保存 <template> 供第二次使用?

jquery - 如何向下滑动容器中的文本

html - 图像叠加在没有位置 :absolute 的动态填充的 div 上