<!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>
409
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
