PHP程序员小白到大牛集训(12期免息)
视频教程分类
推荐视频教程
  • php程序员小白到大牛三个月集训php程序员小白到大牛三个月集训
  • Laravel 9 学习正当时—保姆级教程,想学不会都难!Laravel 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • 首页 >web前端 >前端问答 > 正文

    html5里面的data属性的作用是什么

    原创2022-06-20 10:44:47885 关注公众号:每天精选资源文章推送

    html5里面的data属性的作用是存储私有页面后应用的自定义数据,“data-*”是HTML5新增的一个自定义数据属性功能,作为可以暂存数据使用,自定义的数据可以让页面拥有更好的交互体验;该属性的属性名不能包含大写的字母,在“data-”后面至少有一个字符。

    本教程操作环境:windows10系统、HTML5版本、Dell G3电脑。

    html5里面的data属性的作用是什么

    data-* 属性用于存储私有页面后应用的自定义数据。

    data-* 属性可以在所有的 HTML 元素中嵌入数据。

    自定义的数据可以让页面拥有更好的交互体验(不需要使用 Ajax 或去服务端查询数据)。

    data-* 属性由以下两部分组成:

    • 属性名不要包含大写字母,在 data- 后必须至少有一个字符。

    • 该属性可以是任何字符串

    data-*是HTML5新增的一个自定义数据属性功能,作为可以暂存数据使用。利用dataset可以获取data-属性构造的对象,该方法目前只能在Chrome 、Opera等部分浏览器中实现,其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作。

    语法为:

    <element data-*="somevalue">

    somevalue 指定属性值 (一个字符串)

    示例如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>123</title> 
    <script>
    function showDetails(animal)
    {
    var animalType = animal.getAttribute("data-animal-type");
    alert("The " + animal.innerHTML + " is a " + animalType + ".");
    }
    </script>
    </head>
    <body>
    <h1>物种</h1>
    <p>点击一个物种,看看它是什么类型:</p>
    <ul>
      <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
      <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
      <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
    </ul>
    </body>
    </html>

    输出结果:

    +2.gif

    (学习视频分享:css视频教程html视频教程

    以上就是html5里面的data属性的作用是什么的详细内容,更多请关注php中文网其它相关文章!

    20期PHP线上班

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:html5
  • 相关文章

    相关视频


    专题推荐