自定义属性

最新推荐文章于 2024-06-07 18:18:24 发布

love-study-lele

最新推荐文章于 2024-06-07 18:18:24 发布

阅读量124

点赞数

分类专栏： js 文章标签： dataset

本文链接：https://blog.csdn.net/qq_40639990/article/details/78253122

版权

js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>自定义属性</title>
  </head>
  <body>


    <!--
    如果data后边有多个 “-”， 那么会被转换成小驼峰法命名
    -->
    <div id="box" name='lisi'  data-name="lisi" data-age="10"  data-gender="male"  data-abc-ef="hello"></div>

    <script type="text/javascript">

    var box = document.querySelector('#box');

    //古老的特性操作方法
    //setAttribute, getAttribute, removeAttribute
    // box.innerHTML = box.getAttribute('name');


    //新增的操作方法
    //如果按照 data- 来自定义属性，那么需要使用dom对象上的dataset来对自定义属性进行操作

    //访问 dataset
    console.log(box.dataset);

    console.log(box.dataset.name);
    console.log(box.dataset.age);
    console.log(box.dataset.gender);
    //按照驼峰访问
    console.log(box.dataset.abcEf);

    //修改自定义属性, 直接赋值
    box.dataset.name = "李四";
    box.dataset.gender = "男";


    //自学： jQuery中的data   http://www.css88.com/jqapi-1.9/data/



    </script>


  </body>
</html>

love-study-lele

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义属性

自定义属性  var box = document.querySelector('#box'); //古老的特性操作方法 //setAttribute, getAttribute, removeAttribute // bo
复制链接

扫一扫

专栏目录