zoukankan      html  css  js  c++  java
  • [TimLinux] JavaScript 如何在html标签的data-*属性使用JSON数据

    1. HTML data-*属性

    H5引入的data-*属性,可以在JavaScript通过.dataset.*的方式来获取属性的值,例如:

    /* HTML标签:
     *    <input id="idTest" data-mydata="this is my data">
     */
    
    var idTest = document.getElementById('idTest');
    console.log(idTest.dataset.mydata);
    
    // 输出:this is my data.

    2. data-*属性使用JSON值

    /*
     * 只要data-*属性的值,是符合JSON.stringify转换后的数据格式
     * 就可以逆向,使用JSON.parse(data-*)的方式获取JSON数据
     * 尤其需要注意的是,字符串后的JSON数据,字段的值key、value
     * 都必须是通过双引号引用的。
     * <input id="idTest" data-mydata="{'id': '123', 'result'; 'true'}">
     */
    
    var idTest = document.getElementById('idTest');
    var json_mydata = JSON.parse(idTest.dataset.mydata.replace(/'/g, '"'));
    
    // 得到的json_mydata就是一个JSON格式的数据了。
  • 相关阅读:
    web-9. 动态网页与数据库-2
    web-9. 动态网页与数据库
    web-8. 多框架页面的创建
    web-7. 丰富页面的多媒体
    web-6. 组织页面的表格
    yocto术语二
    yocto术语
    linux source
    linux 添加环境变量
    ubuntu上网
  • 原文地址:https://www.cnblogs.com/timlinux/p/9240570.html
Copyright © 2011-2022 走看看