一、自定义属性（html5标准）data-属性名称="属性值"

  • 自定义属性的名称驼峰式命名规则需要用-隔开
  • 自定义属性名称如果连在一起写，大写会自动转为小写
    data-user="eric"======>属性名称是user

    data-user-name="eric"===>属性名称是userName

    data-userName="eric"=====>属性名称是username

二、jquery的方式操作自定义属性，jQuery方式操作的是内存

三、HTML5的方式获取自定义属性，HTML5操作的是DOM

四、案例：tab切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>HTML5自定义属性</title>

    <style>

        ul{

            list-style: none;

            width: 400px;

        }

        .nav li{

            width: 100px;

            height: 40px;

            line-height: 40px;

            text-align: center;

            color: #fff;

            background: black;

            float: left;

            cursor: pointer;

        }

        ul:first-child li.active{

            background: red;

        }

        .box li{

            width: 400px;

            height: 400px;

            background: pink;

            display: none;

        }

        .box li.show{

            display: block;

        }

    </style>

</head>

<body>

    <ul class="nav">

        <li data-content-id="content01">菜单1</li>

        <li data-content-id="content02" class="active">菜单2</li>

        <li data-content-id="content03">菜单3</li>

        <li data-content-id="content04">菜单4</li>

    </ul>

    <ul class="box">

        <li id="content01">内容1</li>

        <li id="content02" class="show">内容2</li>

        <li id="content03">内容3</li>

        <li id="content04">内容4</li>

    </ul>

    <script>

        window.onload=function(){

            document.querySelector(".nav").onclick=function(e){

                // nav部分

                var currentLi=e.target;

                if(currentLi.classList.contains("active")) return false;

                var oldLi=document.querySelector(".nav li.active");

                oldLi.classList.remove("active");

                currentLi.classList.add("active");

                // content部分

                var oldContent=document.querySelector("#"+oldLi.dataset.contentId);

                oldContent.classList.remove("show");

                var currentContent=document.querySelector("#"+currentLi.dataset.contentId);

                currentContent.classList.add("show");

            }

        }

    </script>

</body>

</html>

HTML5自定义属性操作的更多相关文章

  1. Jquery 操作HTML5自定义属性data-*

    HTML5自定义属性规范的写法<a data-roleid="12"></a>,也可以直接写<a roleid="12">& ...

  2. HTML5自定义属性对象Dataset简介

    一.html5 自定义属性介绍 我之前翻译的“你必须知道的28个HTML5特征.窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设 ...

  3. DOM自定义属性操作

        DOM标准     (一)核心DOM 可以操作一切结构化文档的API,包括HTML和XML,核心DOM是万能的,但又是繁琐的. (二)HTML DOM 专门操作HTML文档的简化版DOM AP ...

  4. HTML5文件操作API

    HTML5文件操作API       一.文件操作API 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或 ...

  5. HTML5 自定义属性 data-*属性名一定要小写吗？

    最近学习 javascript ,参考书籍是< javascript 高级程序设计>第三版,在介绍自定义元素属性时书中给出了一个例子,如下:<div id="myDiv&q ...

  6. HTML5类操作

    一.获取DOM的方式 ①通过类名获取元素,以伪数组形式存在 document.getElementsByClassName("class"); ②通过css选择器获取元素,符合匹配 ...

  7. js 自定义属性操作

    自定义属性操作     element.属性 获取内置属性值     element.getAttribute("属性") 我们自己添加的属性叫自定义属性     element. ...

  8. HTML5自定义属性之data-*

    HTML5 增加了一项新功能是 自定义数据属性 ,也就是  data-* 自定义属性.在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放.当然高级浏览器下 ...

  9. HTML5 自定义属性 data-*介绍

    在HTML5之前HTML4我们也可以自定义属性通过setAttribute去设置或者直接写在HTML标签里面那么HTML5新增data-*(*可以替换成你喜欢的任意名字)属性有什么用呢? 更便的捷操作 ...

随机推荐

  1. shell中if条件字符串、数字比对，[[ ]]和[ ]区别

    目录 shell 括号 test 和 []符号 [[]] 符号 let和(())符号 "[]" , "[[]]" 和 "(())"对比 sh ...

  2. Yii2实现手机二维码扫一扫登入

    一 建数据表 scancode  randnumber字段存储的是一个随机码,可以用uuid token是一个提取用户信息的字段,说白了就是user表的唯一键,如果不担心用户id外泄,用user_id ...

  3. SAS学习笔记60 统计SAS实例之T检验

    单样本 H0:服从正态分布 P=0.0988>0.05不拒绝H0,服从正态分布 H0:等于140t=-2.14,P=0.0397 P<0.05,拒绝H0,差异有统计学意义 均值x=130. ...

  4. java之hibernate之crud

    这篇文章主要讲解: 1>.对Hibernate使用的一些简单封装: · 2>.在单元测试中,使用Hibernate的封装的工具进行增删改查的测试 1.目录结构展示 2.代码展示 2.0 配 ...

  5. NetCore踩坑记1、 一块网卡引发的血案

    公司的项目架构演进,我们也趁机尝试迁移到netcore,系列随笔讲记录我们的踩坑和填坑记录. HttpClient不行? 这是我们第一次尝试netcore 简要介绍环境 netcore2.2+aspn ...

  6. JS基础_强制类型转换-Number

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. jmeter进行压测的步骤

    1)安装jmeter和Badboy. 2)用badboy录制脚本,保存之后直接导出. 3)用jmeter打开badboy录制的脚本,假如是有参数的话,需要写一个csv的参数化文件,在jmeter中添加 ...

  8. Oracle 11g 物理存储结构

    Oracle 系统的物理存储结构比较具体和直观,它用来描述 Oracle 数据在磁盘上的物理组成情况.Oracle 系统的数据在逻辑上存储在表空间中,而在物理上存储在表空间所包含的物理文件(即数据文件 ...

  9. UI5-技术篇-Hybrid App-3-Fiori 百度地图应用

    上一次在Jsbin中测试了百度地图应用:UI5-技术篇-Hybrid App-3-jsbin百度地图 ,主要思路:1.加载百度API  2.自定义控件  3.div标签加载地图,本文主要将相关实施过程 ...

  10. 【雅思】【绿宝书错词本】List1~12

    List 1 ❤methane n.甲烷,沼气 ❤variety n.品种,种类:变化,多样化 ❤congratulate vt.祝贺 List 2 ✔denote v.表示,指示:意味着 ✔iris ...