JavaScript中DOM操作标签属性

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

每种标签都支持的可以直接操作的属性
                        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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大聪明码农徐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值