JavaScript操作标签属性

最新推荐文章于 2024-08-22 14:32:34 发布

郑书鑫

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量1k

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_63825009/article/details/132700159

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.1 HTML基本属性操作

element.属性名设置或返回元素的指定属性。
element.className 设置或返回元素的 class 属性。

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);

Element 对象使用 . 可以调用对象的各个属性。

当 html 中的标签的属性，只有一个值的时候， DOM 中对应的元素的属性值是布尔类型。

1.2 HTML方法操作属性

1、element.getAttribute() 返回元素节点的指定属性值。

getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有一定区别。

document.getElementById('box').getAttribute('id');//获取元素的id 值
document.getElementById('box').id; //获取元素的id 值
document.getElementById('box').getAttribute('mydiv');//获取元素的自定义属性值
document.getElementById('box').mydiv //获取元素的自定义属性值，非IE 不支持
document.getElementById('box').getAttribute('class');//获取元素的class 值

2、element.setAttribute() 把指定属性设置或更改为指定值。

setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如果属性本已存在，那么就会被覆盖。

document.getElementById('box').setAttribute('align','center');//设置属性和值
document.getElementById('box').setAttribute('bbb','ccc');//设置自定义的属性和值

3、element.removeAttribute() 从元素中移除指定属性。

removeAttribute()可以移除 HTML 属性。

document.getElementById('box').removeAttribute('style');//移除属性

使用属性只能来获取和设置的是元素对象原始属性；使用方法可以用来设置元素对象自定义的属性。

4、element.hasAttribute(name) 检查特性是否存在。

1.3 HTML5的data-*自定义属性

HTML5 的 data-* 自定义属性，它们可以在 dataset 属性中获取到的

<body>
<!-- 以data-打头的，叫html5中的自定义属性 -->
<div class="father" age="18" data-score="88" data-address="bj">
我是一个孤独的DIV
</div>
<script>
let boxEle = document.querySelector(".father");
console.log(boxEle.dataset);
console.log(boxEle.dataset.score);
console.log(boxEle.dataset.address);
</script>
</body>