一、自定义属性（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. Android--Google Map API V2使用

    一.获取API Key 1.先获取SHA-1 fingerprint 数字证书是有两种,一种是debug,还有release.前者只能用于测试:后者才可以用于实际产品. debug:在命令行中输入命令 ...

  2. .NET子页Main页面实例（UI页面）

    <%@ Page Language="C#"  MasterPageFile="~/MasterPageDefault.master"   AutoEve ...

  3. springboot2.1.3+spring-session2.1.4分库处理

    使用spring session框架来统一管理session,该框架支持jdbc.redis存储,使用非常简单,可以去官网查看文档一步步接入即可,官网文档如下:https://docs.spring. ...

  4. python两则99乘法表

    分别应用while和for的嵌套循环,适用于初学的人看看 x = 1 while x <= 9: y = 1 while y <= x: print (y,'*',x,'=',x*y,en ...

  5. OSI标准协议分析

    1.各个层的作用 物理层:(physical Layer):物理层负责传送比特(Bit),涉及到接口和传输媒体的机械 电气特性 数据链路层:(data link layer):数据链路层负责传送的帧( ...

  6. LFS7.10——构造临时Linux系统

    参考:LFS编译——准备Host系统 前言 在准备好Host环境后,接下来构造一个临时Linux系统.该系统包含****构建所需要的工具.构造临时Linux系统分两步: 构建一个宿主系统无关的新工具链 ...

  7. CentOS 7.6最小化安装（系统盘和数据盘分离安装）

    CentOS 7.6最小化安装(系统盘和数据盘分离安装) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.创建虚拟机 鉴于大家使用的平台操作系统可能不尽相同,博主精力有限,仅演示 ...

  8. mysqlslap压测

    mysqlslap 是MySQL自带的压测工具: -P --create-schema=test -S /tmp/mysql_sandbox18601.sock --number-of-queries ...

  9. Lombok的使用详解（最详尽的解释，覆盖讲解所有可用注解），解决@Builder.Default默认值问题

    原文:https://blog.csdn.net/f641385712/article/details/82081900 前言 Lombok是一款Java开发插件,使得Java开发者可以通过其定义的一 ...

  10. 用chrome浏览器进行前端debug和停止debug

    首先F12打开控制台: 选择"source","Ctrl+Shift+F"搜索需要debug的代码关键词(Ctrl+O根据文件名搜索): 打开需要debug的文 ...