JavaScript中DOM操作标签属性

大聪明码农徐

已于 2022-02-01 13:19:16 修改

阅读量411

点赞数 1

分类专栏： JavaScript基础文章标签： javascript linq html

于 2022-02-01 13:07:14 首次发布

本文链接：https://blog.csdn.net/qq_45799465/article/details/122763541

版权

JavaScript基础专栏收录该内容

34 篇文章 18 订阅

订阅专栏

标签支持的可以直接操作的属性

每种标签都支持的可以直接操作的属性
id id属性
className class属性
title title属性

操作语法
设定
标签对象.id = 属性值
标签对象.className = 属性值
标签对象.title = 属性值
获取
var 变量 = 标签对象.id ;
var 变量 = 标签对象.className ;
var 变量 = 标签对象.title ;

<body>
    <div class="box"></div>
    <script>
        const oDiv = document.querySelector("div");
        oDiv.id = "BOX";
        var cla = oDiv.className;
        console.log(cla);
    </script>
</body>

运行代码：

标签支持的布尔属性

默认选中多选只读禁用 ....
设定
标签对象.布尔属性 = 属性值
获取
var 变量 = 标签对象.属性属性
布尔属性操作的结果不管是设定还是获取一定是布尔数值( true / false )
执行是 true
不支持是 false

标签属性的通用操作方法布尔属性除外

所有标签的所有属性都可以使用的通用的操作方法
布尔属性除外
设定
标签对象.setAttribute( '属性' , 属性值 );
获取
var 变量 = 标签对象.getAttribute( '属性' );
删除
标签对象.removeAttribute( '属性' );

<body>
    <div class="box" id = "box"></div>
    <script>
        // 获取标签对象
        const oDiv = document.querySelector("div");
        // 设定
        oDiv.setAttribute('name',456);
        // 获取
        var cla = oDiv.getAttribute('class')
        console.log(cla);
        // 删除
        oDiv.removeAttribute('id');
    </script>
</body>

运行结果：

大聪明码农徐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript中DOM操作标签属性

标签支持的可以直接操作的属性每种标签都支持的可以直接操作的属性 id id属性 className class属性 title title属性操作语法设定标签对象.id = 属性值 ...
复制链接

扫一扫