html 自定义属性的获取和应用
在html 中，我们可以给元素设置自定义属性，格式： data-属性="属性值"，可以设置一个，也可以设置多个
1.获取元素属性的常规方法：直接获取元素，然后使用getAttribute()函数获取元素属性的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul {
background: #ccc;
width: 500px;
height: 200px;
}
</style>
<script>
window.onload = function() {
// var aInput = document.getElementsByTagName("input"); //不知道为什么，这样获取的元素不能使用遍历 forEach
var aInput = document.querySelectorAll("input");
var oUl = document.getElementById("box");
aInput.forEach(function(val, index) {
val.onclick = function() {
if (index == 0) {
oUl.innerHTML = oUl.getAttribute('data-name');
} else if (index == 1) {
oUl.innerHTML = oUl.getAttribute('data-sex');
} else {
oUl.innerHTML = oUl.getAttribute('data-age');
}
}
});
}
</script>
</head>
<body>
<input type="button" value="姓名"><input type="button" value="性别"><input type="button" value="年龄">
<ul id="box" data-name="huanying2015" data-sex="man" data-age="25"></ul>
</body>
</html>
或者：
<script>
window.onload = function() {
// var aInput = document.getElementsByTagName("input"); //不知道为什么，这样获取的元素不能使用遍历 forEach
var aInput = document.querySelectorAll("input");
var oUl = document.getElementById("box");
aInput[0].onclick = function() {
oUl.innerHTML = oUl.getAttribute('data-name');
}
aInput[1].onclick = function() {
oUl.innerHTML = oUl.getAttribute('data-sex');
}
aInput[2].onclick = function() {
oUl.innerHTML = oUl.getAttribute('data-age');
}
}
</script>
运行结果：
2. 不适用getAtrribute()函数，也可以获取元素属性的值，使用 dataset 来获取，例如：<div id="box" data-kkt="hello">hello world!</div> ；当要获取元素div中data-kkt属性的值时，可以 先获取元素 el = $("#box") ;然后 el.dataset.kkt ,这样就可以获取元素的属性值了
把上面这个获取属性值的函数改为 el.dataset.属性 改写如下：
<script>
window.onload = function() {
// var aInput = document.getElementsByTagName("input"); //不知道为什么，这样获取的元素不能使用遍历 forEach
var aInput = document.querySelectorAll("input");
var oUl = document.getElementById("box");
aInput.forEach(function(val, index) {
val.onclick = function() {
if (index == 0) {
oUl.innerHTML = oUl.dataset.name;
} else if (index == 1) {
oUl.innerHTML = oUl.dataset.sex;
} else {
oUl.innerHTML = oUl.dataset.age;
}
}
}); // aInput[0].onclick = function() {
// oUl.innerHTML = oUl.dataset.name;
// }
// aInput[1].onclick = function() {
// oUl.innerHTML = oUl.dataset.sex;
// }
// aInput[2].onclick = function() {
// oUl.innerHTML = oUl.dataset.age;
// }
}
</script>
运行结果，也是一样的：
3. 使用自定义索引制作选项卡：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 300px;
height: 200px;
display: none;
text-align: center;
border: 1px solid #ccc;
}
div.php {
background: red;
}
div.javascript {
background: blue;
}
div.html {
background: green;
}
div.linux {
background: yellow;
}
</style>
<script>
window.onload = function() {
var aInput = document.querySelectorAll("input");
var aDiv = document.querySelectorAll("div");
aInput.forEach(function(val, key) {
val.onclick = function() {
for (var i = 0, len = aInput.length; i < len; i++) {
aInput[i].style.background = "";
aDiv[i].style.display = "none";
}
val.style.background = 'red';
// val.dataset.target 获取val元素的自定义target属性，因为自定属性里前有一个#号，所以去掉#，就变成了val.dataset.target.substring(1)
// 对应的div元素Id刚好是 val 的自定义索引data-target属性去掉# 号，所以可以按照如下方法获取元素，然后进行显示
document.getElementById(val.dataset.target.substring(1)).style.display = 'block';
}
});
}
</script>
</head>
<body>
<input type="button" value="点击1" data-index="1" data-target="#php" style="background:red;">
<input type="button" value="点击2" data-index="2" data-target="#javascript">
<input type="button" value="点击3" data-index="3" data-target="#html">
<input type="button" value="点击4" data-index="4" data-target="#linux">
<div id="php" style="display:block" class="php">php 是一门强大的后端脚本语言</div>
<div id="javascript" class="javascript"> javascript 是一门强大的前端脚本语言</div>
<div id="html" class="html">html 是一门浏览器语言</div>
<div id="linux" class="linux">linux 是一门强大的服务器脚本语言</div>
</body>
</html>
运行结果：
html 自定义属性的获取和应用的更多相关文章
- H5_0017：通过元素自定义属性值获取元素对象，并获取属性值
// 通过元素的属性值查找对象 // document.querySelectorAll("[data]").forEach(function(e) ...
- jQuery随笔-自定义属性获取+tooltip
1.Jquery自定义属性获取 1) 通过自定义属性值获取document console.log($('[data-id='+item_id+']',listWrap)); $('[data-id= ...
- 自定义属性，innerHTML,outerHTML,dom节点的获取，className,tagName,更改或者是获取css属性
01.自定义属性 1.自定义属性: 作用:保存数据 通用的自定义属性的前缀 data-属性="属性值" 注:自定义的属性不能通过 元素.属性 取属性值 ,需使用getAttribu ...
- js下 Day04、DOM操作--自定义属性
语法: 元素.getAttribute('自定义属性名') 功能:获取自定义属性 语法: 元素.setAttribute('自定义属性名','值') 功能:设置自定义属性 语法: 元素.removeA ...
- Android Weekly Notes Issue #235
Android Weekly Issue #235 December 11th, 2016 Android Weekly Issue #235 本期内容包括: 开发一个自定义View并发布为开源库的完 ...
- javascript中DOM部分基础知识总结
1.DOM介绍 1.1 DOM概念 文档对象模型(Document Object Model),它定义了访问和处理HTML文档的标准方法.现在我们主要接触到的是HTML DOM. ...
- 一起来学习Android自定义控件2-简单的写字板控件
概述 上一篇文章我们对自定义控件进行了一个大体的知识介绍.今天就来学习自定义一个简单的写字板控件. 先来看看效果图 就是简单的根据手指写下的轨迹去画出内容 实现 在上一篇文章里提到了android官方 ...
- Javascript之十大常用原理性样例大总结
案例一:全选等 运用知识点:ondblclick=()| onclick | 寻找标签属性及判断和函数的应用
- Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
1.概述 本篇博客的产生呢,是因为,群里的哥们暖暖给我发了个效果图,然后问我该如何实现顶部ViewPager指示器的字体变色,该效果图是这样的: 大概是今天头条的app,神奇的地方就在于,切换View ...
随机推荐
- idea+dubbo+zookeeper项目访问html页面的方法
将js,html文件放入consumer的resource的static和template文件中 1 consumer的pom需要引入模板的jar包 <dependency> ...
- css中背景的应用
浏览器默认的字体大小是 font-size:16px; 谷歌最小的是10px 其他浏览器是12px 通配符选择器 * “*”的意思是代表所有的标签 回到正题 background 背景 他的几 ...
- centos7.0KVM虚拟化
需要在图形化界面完成实验 查看CPU信息 # cat /proc/cpuinfo centos7默认安装的虚拟化包 # yum list open*tools 如果没安装就安装 #yum instal ...
- andrid 上传图片 asp.net 后台接收并保存
android 端代码 package com.example.uploadfile; import java.io.DataOutputStream; import java.io.File; im ...
- [UE4]图片按钮设置技巧
- 您无法登陆系统。原因可能是您的用户记录或所属的业务部门在Microoft Dynamics CRM中已被禁用
问题发生在CRM 4.0 上 1 用户所在办事处及办事处上级被禁用. 2 如果已经重新启用了,还是报这个错误. 可以把停用的办事处及相关下级再重新--停用--启用一次试试. 3 如果还是报错,查看是否 ...
- mobilehack -转
# mobileHack##工具类网站 [HTML5 与 CSS3 技术应用评估](http://html5please.com/ "html5与css3技术应用评估") [各种奇 ...
- virtual box + win7 + usb + share folder
1.enable virtaulization on BIOS 2.new machine setup, memory, harddisk size 3. 4.install extension pa ...
- python re模块和collections
re模块下的常用方法 import re ret = re.findall('a', 'eva egon yuan') # 返回所有满足匹配条件的结果,放在列表里 print(ret) #结果 : [ ...
- Java - 26 Java 数据结构
Java 数据结构 Java工具包提供了强大的数据结构.在Java中的数据结构主要包括以下几种接口和类: 枚举(Enumeration) 位集合(BitSet) 向量(Vector) 栈(Stack) ...