JavaScript-DOM动态控制Html标签对象样式和innerHTML、className属性

文本1

//首先获取标签对象

var p = document.getElementById("text1");

//通过对象自带的style方法设置不同的样式

p.style.backgroundColor = "black";

p.style.fontSize = "20px";

//上面是给p标签设置两个样式，背景颜色和字体大小

说明：css样式中的属性带“-”的属性名，转换成驼峰格式使用

2.innerHTML属性，这个方法属于标签对象。用于获取html标签之间的html标签和文本内容，也可以用于操作标签内的值

//获取功能

var ptag = document.getElementById("text1").innerHTML;

console.log(ptag);

输出结果：文本1

//操作值的功能

var ptag = document.getElementById("text1").innerHTML+="标签";

console.log(ptag);

输出结果：文本1标签

3.className属性，用于获取html标签的class属性，也可以当作变量使用，给标签赋class属性值

//使用上面例子的p标签，省略getElement....

ptag.className = "p1";

console.log(ptag.className);

输出结果：p1