<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="../img/pic1.gif" alt="" width="500px"/>
<h3 id="header" class="hello" style="color: red;" title="当幸福来敲门" index="php.cn">
《当幸福来敲门》：别走，幸福终究会到来
</h3>
</body>
<script>
//1.原生属性：看做当前元素对象的属性，进行读写
var img = document.getElementsByTagName('img').item(0);
console.log(img.src); //读取原生属性
img.src="../img/pic2.jpg"; //更新属性
img.width=800;
//class属性，因为class与js中的关键字冲突，用className来表示
var h3 = document.getElementById('header');
console.log(h3.className);
//style属性 它的值不是一个字符串 是一个对象
h3.style.color="green";
//2.自定义属性
if(h3.hasAttribute('index')){ //检查属性是否存在
console.log(h3.getAttribute('index')) //查看属性
h3.setAttribute('index','当幸福来敲门') //更新属性
console.log(h3.getAttribute('index'))
h3.removeAttribute('style') //移除属性
}
//以上方法有可以用在原生属性
h3.setAttribute('style','color: yellow;font-size: 12px;');
//attributes以数组的方式来获取元素的属性 这时属性是只读的 获取的是实时更新的
console.log(h3.attributes);
console.log(h3.attributes[0]);
console.log(h3.attributes['id']);
console.log(h3.attributes['style']);
</script>
</html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
