DOM属性详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{width: 100px;height: 100px;border: 1px solid #333;margin-bottom: 30px;}
</style>
</head>
<body>
<div id='qw' style='background:blue'></div>
<img src="images/1.jpg" alt="" id='im'>
<script type='text/javascript'>
var a=document.getElementById('im');
3种方法属性设置
（1）属性设置
// 1.节点对象.属性名=属性值;
// 注意：特殊属性需要发生名称变化，例如：class--->className for--->htmlFor
// 2.node.setAttribute(属性名,属性值)
// 注意：节点属性名与HTML属性名一致
// 3.node[属性名]=属性值
// 注意：特殊属性需要发生名称变化，例如：class--->className for--->htmlFor
// 1)种.
// a.src='images/2.jpg';
// 2)种. 属性名 属性值
// a.setAttribute('src','images/2.jpg');
// 3)种.
// a['src']='images/2.jpg';
// 3种属性获取
// （2）属性的获取
// 1. 节点对象.属性名
// 2. node.getAttribute(属性名)
// 3. node[属性名]
// 1)种.
console.log(a.src);//绝对路径
// 2)种
console.log(a.getAttribute('src'));//相对路径
// 3)种
console.log(a['src']);//绝对路径
// DOM样式的获取：
// （1）只能取出行内样式,不能取出样式表样式
// node.style.样式名
// （2）取出其它样式
// window.getComputedStyle(节点对象,null)
// 返回值：style对象
var ac=document.getElementById('qw');
var b=window.getComputedStyle(ac,null).width;
console.log(b);//输出值是100px
/*
DOM中样式的修改
节点对象.style.样式名=值;
HTML中样式的名称在DOM中同样有效，
注意：特殊样式，需要改变 text-align ----> textAlign 去掉-，从第二个单词开始首字母大写
*/
var o=document.getElementById('qw');
o.style.background='red';
//为对象新增属性，可以随意新增属性(bc也可以是一个属性，自己定义的)
a.bc='hello';
alert(a.bc);
console.log(a.bc);
</script>
</body>
</html> 相关推荐
星星有所不知 2020-10-12
zuncle 2020-09-28
huaoa 2020-09-14
北京老苏 2020-08-17
luvhl 2020-08-17
Kakoola 2020-07-29
drdrsky 2020-07-29
书虫媛 2020-07-08
liaoxuewu 2020-07-08
SIMONDOMAIN 2020-07-08
爱读书的旅行者 2020-07-07
tianzyc 2020-07-04
Vue和React是数据驱动视图，如何有效控制DOM操作?能不能把计算，更多的转移为js计算？因为js执行速度很快。patch函数-->patch,对比tag,对比tag与key,对比children
Lophole 2020-07-04
Lophole 2020-06-28
liaoxuewu 2020-06-26
ApeLife技术 2020-06-26
北京老苏 2020-06-25
Lophole 2020-06-14