H5-自定义属性

最新推荐文章于 2024-09-18 09:28:47 发布

943学前端

最新推荐文章于 2024-09-18 09:28:47 发布

阅读量128

点赞数

分类专栏： HTML5笔记文章标签： html5

本文链接：https://blog.csdn.net/weixin_49924309/article/details/107852949

版权

HTML5笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 定义 -->
    <!-- 规范
    1.data-开头
    2.data-后必须至少有一个字符，多个单词使用-连接
    建议：
    1.名称应该都使用小写--不要包含任何的大写字符
    2.名称中不要有任何的特殊符号
    3.名称不要使用纯数字 -->
    <p data-school-name="itcast">943学前端</p>

    <!-- 取值 -->
    <script>
        window.onload = function() {
            var p = document.querySelector("p");
            // 获取自定义属性值
            // 将data-后面的单词使用camel命名法连接：必须使用camel合法获取值否则有可能无法获取到值
            // var value = p.dataset["schoolname"]; //data-schoolname
            var value = p.dataset["schoolName"]; //data-school-name
            console.log(value);
        }
    </script>
</body>

</html>