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 ...
随机推荐
- Java泛型深入理解(转载)
原文地址 http://blog.csdn.net/sunxianghuang/article/details/51982979 泛型之前 在面向对象编程语言中,多态算是一种泛化机制.例如,你可以将 ...
- rsync数据备份
scp远程复制 scp是 secure copy的缩写, scp是linux系统下基于ssh登陆进行安全的远程文件拷贝命令. 命令格式: scp local_file remote_username@ ...
- python之路——3
王二学习python的笔记以及记录,如有雷同,那也没事,欢迎交流,wx:wyb199594 复习 1. 格式化输出 %s %d %%2. 编码 ASCII码——unicode万国码——utf-8(1个 ...
- Jmeter（三十六）纵横并发、限制QPS
一.纵横并发 Jmeter设计并发事件,这应该是一项必备技能. 首先来看并发的概念. 通常在性能测试中会涉及到并发用户数的概念,有关并发用户数(系统用户数)的详解后续再记. (有关并发.并行的概念参考 ...
- vue 绑定属性 绑定Class 绑定style
<template> <div id="app"> <h2>{{msg}}</h2> <br> <div v-bi ...
- BCGcontrolBar(三) 添加表格(Grid)组件
表格组件和图表组件是BCG的亮点之一 如下图 BCG有众多的表格样式可供选择 下图是插入基本表格组件后的效果 首先在程序中添加 BasicGridCtrl.h BasicGridCtrl.cpp 因为 ...
- java读取按行txt文件
import java.io.BufferedReader; import java.io.FileInputStream; import java.io.InputStreamReader; pub ...
- c# webBrowser全掌握
一.获取网页源代码 1.不含有框架 string s=WB1.DocumentText; //webbrowser1命名为WB1,下同 2.含有框架 引用mshtml; //位置C ...
- 如何用两块硬盘做磁盘阵列的教程Raid 1
如今,市面上的大部分服务器都自带有阵列卡.只要有两块以上硬盘,我们就可以利用服务器自带的阵列卡做磁盘阵列.Raid 1 为例.Raid 1 是磁盘阵列的其中一个系列,将两块硬盘构成磁盘阵列,可以保证数 ...
- Linux设置Oracle环境变量
方法一:直接运行export命令定义变量,该变量只在当前的shell(BASH)或其子shell(BASH)下是有效的,shell关闭了,变量也就失效了,再打开新shell时就没有这个变量,需要使用的 ...