四、样式表的属性
1、获取行间样式表的属性
语法：对象.style.属性名
对象.style["属性名"]
2、设置行间样式表的属性
语法：对象.style.属性名="属性值"
3、获取所有样式表的属性
IE: 对象.currentStyle["属性名"]
其他：window.getComputedStyle(对象，伪类)["属性名"]
注：个别浏览器对第二个伪类不支持，第二个参数可以写成null
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#first{
font-size: 20px;
}
</style>
</head>
<body>
<div class="div1" id="first">1</div>
<script>
var div1 = document.getElementById('first');
//css脚本化
//设置 成行间样式
div1.style.color = 'red';
div1.style.width = '200px';
div1.style.height = '200px';
div1.style.backgroundColor = 'blue';
//backgroundColor 等价于 background-color的css属性
//多个单词需要使用驼峰形式
div1.style.borderRadius = '100px';
//css属性有多个值
div1.style.border = '20px solid green';
//获取 行间样式
console.log(div1.style.width);
console.log(div1.style['width']);
//不能获取内部样式/外部样式
console.log(div1.style.fontSize);
//封装方法, 解决js兼容性的时候，就是封装方法
function getStyle(obj,attr){
//IE
if(obj.currentStyle){
return obj.currentStyle[attr];
//非IE
}else{
return window.getComputedStyle(obj,null)[attr];
}
}
//获取指定元素的css属性的值
var fs = getStyle(div1,'font-size');
console.log(fs);
</script>
</body>
</html>
【注】getComputedStyle与style的区别
只读与可写getComputedStyle(ie下是currentStyle)方法是只读的，只能获取样式，不能设置；而element.style能读能写
getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素
，getComputedStyle方法返回对象中length属性值（如果有），而element.style就是0。
五、DOM创建节点、插入节点、删除节点、替换节点
- document.createElement() 创建一个元素节点
- document.createTextNode()创建一个文本节点
- 父元素.appendChild(newChild) 将新节点添加到父节点的孩子列表的末端
- 父元素.insertBefore(newObj,节点）将新节点添加到父节点的某个子节点的前面
- 父元素.removeChild(obj)从父节点的子节点列表中删除制定的节点
- 父元素.replaceChild(newObj,OldObj)新节点替换旧节点
- cloneNode()克隆节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<p>p标签</p>
<ul>
<li>li标签</li>
<li>li标签</li>
<li>li标签</li>
</ul>
</div>
<script>
//1.获取节点常用的属性（元素、节点的属性）
var div = document.getElementById('box');
//childNodes 拿到所有的子节点
console.log(div.childNodes);
//parentNode 父节点（用的最多）
console.log(div.parentNode);
//previousSibling 前面的兄弟节点
console.log(div.previousSibling);
//nextSibling 后面的兄弟节点
console.log(div.nextSibling);
//firstChild 子节点第一个 lastChild子节点最后一个
console.log(div.childNodes.firstChild);
console.log(div.childNodes.lastChild);
//有个地方需要注意：就是元素之间不能有空格、换行，否则会拿到文本节点text，
//而text节点对我们并没有任何用处
//2.创建、追加、删除、替换、插入节点
//缺点就是会完全覆盖该节点下所有的内容
//innerHTML 它并没有在DOM（W3C）规范里
//优点：操作方便，速度快
//div.innerHTML = "<h1>innerHTML</h1>";
//创建新的元素
var newNode = document.createElement('a');
//创建文本节点
var textNode = document.createTextNode('百度');
//追加一个a标签，添加到最后
div.appendChild(newNode);
//在a标签里追加文本
newNode.appendChild(textNode);
//insertBefore 插入标签，在某个标签之前
div.insertBefore(newNode,document.querySelector('p'));
//removeChild删除某个标签，
//只是把标签从DOM结构中删除掉了，并没有在内存中删除这个对象
div.removeChild(newNode);
//replaceChild 替换，新标签替换已有标签
div.replaceChild(newNode,document.querySelector('p'))
//克隆（复制）一个新节点
var clone = div.cloneNode(true);//克 隆的是div
div.appendChild(clone);
</script>
</body>
</html>
转载于:https://www.cnblogs.com/codingplayer/p/7274557.html