【webApi】深入浅出“自定义属性”

最新推荐文章于 2024-05-17 13:52:13 发布

嘻咦啊写

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量222

点赞数 1

文章标签： javascript 算法前端

本文链接：https://blog.csdn.net/belloc_li/article/details/123780459

版权

自定义属性，顾名思义就是自己定义的html本身没有的属性。它的作用就是存储数据。
而操作自定义属性，就需要用到attribute语法。

attribute

setAttribute(‘属性名’，属性值):设置属性
getAttribute(‘属性名’)：获取属性
removeAttribute(‘属性名’)：移除属性

接下来看一个案例来看一下attribute的实际应用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .one {
        height: 100px;
        border: 5px solid blue;
      }
    </style>
  </head>
  <body>
    <div
      id="box"
      aaa="啊啊啊"
      class="one"
      style="width: 100px;background-color: red"
    ></div>

    <script>

//获取元素
let box = document.querySelector("#box")

box.setAttribute('aaa','yayaya')  //有则覆盖：
box.setAttribute('bbb','333')   //无则添加
box.removeAttribute('bbb')   //删除
let aaa = box.getAttribute('aaa')  // 查看
console.log(aaa)

      
      
    </script>
  </body>
</html>

嘻咦啊写

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【webApi】深入浅出“自定义属性”

自定义属性，顾名思义就是自己定义的html本身没有的属性。它的作用就是存储数据。而操作自定义属性，就需要用到attribute语法。attributesetAttribute(‘属性名’，属性值):设置属性getAttribute(‘属性名’)：获取属性removeAttribute(‘属性名’)：移除属性接下来看一个案例来看一下attribute的实际应用<!DOCTYPE html><html lang="en"> <head> &lt
复制链接

扫一扫