HTML5基础加强css样式篇（标签自定义属性）(八)

最新推荐文章于 2024-02-03 22:52:34 发布

咸鸭蛋炒饭

最新推荐文章于 2024-02-03 22:52:34 发布

阅读量2.5k

点赞数

分类专栏： HTML5基础篇文章标签： html5 css html

本文链接：https://blog.csdn.net/u010853130/article/details/62224375

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.自定义属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5初级阶段</title>
    <style type="text/css">
        .box {
            /*Add your CSS*/
        }
    </style>
</head>
<body>

<!--
    自定义属性：给程序使用的数据，存储在自定义属性中

    语法规则：
        1.必须以 data-
        2.多个英文单词使用 - 分割

-->

    <div id="box" data-demo-test="hello world">Hello</div>

<script type="text/javascript">
    //        Add your code
    var boxDom = document.querySelector("#box");
    //var val = boxDom.getAttribute("demo");

//    HTML5中使用 DOM  的 dataset 操作自定义属性
    //读取自定义属性值
    //var val = boxDom.dataset.demoTest;
    //console.log(val);
//    修改自定义属性值
    //boxDom.dataset.demoTest = "12345";


//    描述一个人
    var jsonObj = {
        "name": "jance",
        "age": 29
    }

//    JSON 对象 转 字符串
    var jsonStr= JSON.stringify(jsonObj);
//    存储一个JSON对象
    boxDom.dataset.demoTest = jsonStr;

//    获取信息
    var str = boxDom.dataset.demoTest;
//    JSON格式的字符串转换成 JSON对象
    var json = JSON.parse(str);
    console.log(json.name);

//    HTML5自定属性只能存储字符串或者数字，如果存储JSON，需要进行相应的转换

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

咸鸭蛋炒饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5基础加强css样式篇（标签自定义属性）(八)

1.自定义属性尚硅谷HTML5 初级阶段 .box { /*Add your CSS*/ }  H
复制链接

扫一扫