我如何为div添加一个类?
var new_row = document.createElement('div');
我如何为div添加一个类?
var new_row = document.createElement('div');
当前回答
这个答案是很久以前写的/接受的。从那时起,更好,更全面的答案和例子已经提交。你可以向下滚动来找到它们。以下是为后人保留下来的公认的原始答案。
new_row.className = "aClassName";
这里有更多关于MDN: className的信息
其他回答
使用.classList.add()方法:
const element = document.querySelector('div.foo'); element.classList.add('酒吧'); console.log (element.className); < div class = " foo " > < / div >
这个方法比覆盖className属性更好,因为它不会删除其他类,如果元素已经有该类,也不会添加该类。
您还可以使用element切换或删除类。classList(参见MDN文档)。
如果要创建很多元素,您可以创建自己的基本createElementWithClass函数。
function createElementWithClass(type, className) {
const element = document.createElement(type);
element.className = className
return element;
}
非常基本的我知道,但能够调用以下是少混乱。
const myDiv = createElementWithClass('div', 'some-class')
而不是很多
const element1 = document.createElement('div');
element.className = 'a-class-name'
一遍又一遍。
跨浏览器的解决方案
注意:Internet Explorer 9不支持classList属性。以下代码可以在所有浏览器中运行:
function addClass(id,classname) {
var element, name, arr;
element = document.getElementById(id);
arr = element.className.split(" ");
if (arr.indexOf(classname) == -1) { // check if class is already added
element.className += " " + classname;
}
}
addClass('div1','show')
源码:如何在js中添加类
var newItem = document.createElement('div');
newItem.style = ('background-color:red');
newItem.className = ('new_class');
newItem.innerHTML = ('<img src="./profitly_files/TimCover1_bigger.jpg" width=50 height=50> some long text with ticker $DDSSD');
var list = document.getElementById('x-auto-1');
list.insertBefore(newItem, list.childNodes[0]);
同样值得一看的是:
var el = document.getElementById('hello');
if(el) {
el.className += el.className ? ' someClass' : 'someClass';
}