一、自定义属性（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. AS3.0 m3u8文件视频播放器

    AS3.0 m3u8文件视频播放器(暂无源码): 点击欣赏! http://lxmc.aomaya.com/fengzi/m3u8/m3u8Player.swf

  2. [LOJ2002] [SDOI2017] 序列计数

    题目链接 LOJ:https://loj.ac/problem/2002 洛谷:https://www.luogu.org/problemnew/show/P3702 Solution 考虑补集转换, ...

  3. golang --iota 用法

    package main import "fmt" func main() { const ( a = iota //0 b //1 c //2 d = "ha" ...

  4. js的for循环中出现异步函数，回调引用的循环值始终是最后的值

    一.问题 今天工作中解决bug发现是由“for循环的异步函数,回调引用的循环值始终是最后的值”的现象导致的,如: for (var i = 0; i < files.length; i++) { ...

  5. 【转载】Javascript使用Math.random()随机数函数生成1至1000的随机数

    在Javascript代码编写过程中,有时候我们需要使用Js来生成随机数,清除ajax的get请求缓存的时候我们会带上一个随机数来解决此问题,此外在其他应用中也可能使用到随机数,在Javascript ...

  6. vue 自定义image组件

    介绍 1:当图片加载失败时,给出错误提示. 2:当图片加载中时,给出加载提示. 3:图片处理模式:等比缩放/裁剪/填充/... 1.图片加载状态处理 通过给图片绑定load事件与error事件处理函数 ...

  7. Android ProGuard：代码混淆压缩

    写这篇文章的目的 一直以来,在项目中需要进行代码混淆时每次都要去翻文档,很麻烦.也没有像写代码那样记得那么多.既然要查来查去,就不如自己捋一捋这个知识点了,被人写的终究还是别人的.所以自己去翻看了很多 ...

  8. UCOSII消息队列

    主结构体 typedef struct os_q { /* QUEUE CONTROL BLOCK */ struct os_q *OSQPtr; /* Link to next queue cont ...

  9. FastDFS+Nginx搭建Java分布式文件系统

    一.FastDFS FastDFS是用c语言编写的一款开源的分布式文件系统.FastDFS为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,使用FastDFS ...

  10. centos7 安装 git服务器

    服务器端配置 yum install -y git groupadd git useradd git -g git 2.创建authorized_keys cd /home/git mkdir .ss ...