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 ...
随机推荐
- jquery.autocomplete 搜索文字提示
function GetJobTitle(obj) { $(obj).autocomplete("GetJobTitle.ashx", { max: 12, //列表里的条目数 m ...
- ScrollView嵌套RecyclerView、ScrollView嵌套Listview、ScrollView嵌套各种布局，默认不在顶部和回到顶部的解决方法；
如果: ScrollView.scrollTo(0,0): ScrollView.fullScroll(View.FOCUS_UP) : ScrollView.smoothScrollTo(0, 0) ...
- Django中的ORM介绍，字段以及字段的参数。
Object Relational Mapping(ORM) ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据 ...
- 洛谷 P2629 好消息，坏消息
题目描述 uim在公司里面当秘书,现在有n条消息要告知老板.每条消息有一个好坏度,这会影响老板的心情.告知完一条消息后,老板的心情等于之前老板的心情加上这条消息的好坏度.最开始老板的心情是0,一旦老板 ...
- python、javascript中的不可变对象
比如python中str是不变对象,而list是可变对象,javascript中str也是不变对象,而array是可变对象 python的例子: >>> a = 'abc' > ...
- flask session,蓝图,装饰器,路由和对象配置
1.Flask 中的路由 *endpoint - url_for 反向地址 *endpoint 默认是视图函数名 *methods 指定视图函数的请求方式,默认GET defaults={& ...
- MySQL密码强度验证修改
MySQL5.6.6版本之后增加了密码强度验证插件validate_password,相关参数设置的较为严格. 影响的语句和函数有:create user,grant,set password,pas ...
- BZOJ4195 luoguP1955 NOI2015D1T1 程序自动分析
题意:给定n个(xi = xj) 或 (xi != xj) 的条件,问是否可能成立 BZOJ链接:http://www.lydsy.com/JudgeOnline/problem.php?id=419 ...
- ES6数组的新增功能，还是很强大的好多地方用的到
map,reduce,filter ,forEach 废话不多说代码走起 map 映射 就是一个对一个 /* 比如:学生成绩分数对应及格不及格 也可以做一些算数运算 */ let chengji ...
- ROS学习手记 - 7 创建ROS msg & srv
至此,我们初步学习了ROS的基本工具,接下来一步步理解ROS的各个工作部件的创建和工作原理. 本文的详细文档:http://wenku.baidu.com/view/623f41b3376baf1ff ...