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 ...
随机推荐
- acl的基本知识点
#ACL acl number 3001 rule 1 deny udp destination-port eq 445 rule 2 deny tcp destination-por ...
- HTTP 2.0 原理详细分析
HTTP 2.0是在SPDY(An experimental protocol for a faster web, The Chromium Projects)基础上形成的下一代互联网通信协议.HTT ...
- Volley封装
Volley.jar下载 在Application初始化 Volley queues=Volley.newRequestQueue(appContext); 并返回RequestQueue 对象 pu ...
- [UE4]IsValid方法妙用
由于UE4中各个对象的创建顺序无法保证,因此可以使用IsValid方法判断一个对象是否有效,如果无效则初始化,如果有效则直接可以使用.
- Linux下用node-inspector实现NodeJS远程调试开发
1.首先安装 node-inspector npm install -g node-inspector -g表示全局安装,如果像我一样安装失败,再试几次,npm偶尔就会这样抽风... 这一步是关键的, ...
- Spark2.X分布式弹性数据集
跑一下这个结果 参考代码 package com.spark.test import org.apache.spark.sql.SparkSession import org.apache.spark ...
- 面向对象之—property，staticmethod
一 特性( property) property是一种特殊的属性,访问它时会执行一段功能(函数)然后返回值. property是内置的一种封装方法:把一个属性“伪装”成一个数据属性,做法就是在需要伪装 ...
- ASCII、Unicode和UTF-8
转自廖雪峰的官方网站:https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/00138 ...
- grep与egrep的区别
grep与egrep的区别: 在linux系统环境下,我们通常使用grep命令来过滤出需要的行而egrep确很少使用,他们的区别其实很简单,grep默认不支持正则表达式,egrep默认支持正则表达式, ...
- jQuery对象的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...