样式操作:
className
classList
classList.add
classList.remove
<style>
.c1{
font-size:15px
}
</style>
<div class='c1 c2'></div>
obj.style.font-size ='16px';
属性操作:
obj.setAttribute('xxxx','liunx')#添加属性
obj.removeAttribute('value')#移除属性
obj.attributes#获取所有属性
创建标签,并添加到HTML中:
a.字符串形式
b.对象的方式
document.createElement('input');
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" onclick="AddEle1();value='+'"> <input type="button" onclick="AddEle2();value='+'"> <div id="i1"> <input type="text"> <hr/> </div> <script> function AddEle1() { //创建一个标签 //将标签添加到i1里面 var tag= document.createElement('input'); tag.setAttribute('type','text') tag.style.fontSize='22px' tag.style.color='red' // document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag); document.getElementById('i1').appendChild(tag); } function AddEle2() { //创建一个标签 //将标签添加到i1里面 var tag="<input type='text'/><hr/>";
//注意 第一个参数只能是 beforeEnd afterBegin beforeBegin afterEnd document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag); } </script> </body> </html>