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 ...
随机推荐
- 廖雪峰Java4反射与泛型-3范型-6super通配符
1.super通配符 1.1super通配符第一种用法 泛型的继承关系 Pair<Integer>不是Pair<Number>的子类,如 static void set(Pai ...
- ViewPager系列之 仿魅族应用的广告BannerView
转自:https://juejin.im/post/5933c65d0ce463005717cbe9 前言 Banner广告位是APP 中的一个非常重要的位置,为什么呢?因为它能带来money.是一个 ...
- 0001 - Spring 框架和 Tomcat 容器扩展接口揭秘
前言 在 Spring 框架中,每个应用程序上下文(ApplicationContext)管理着一个 BeanFactory,BeanFactory 主要负责 Bean 定义的保存.Bean 的创建. ...
- Postgres 主从复制搭建步骤
系统版本: CentOS Linux release 7.5.1804 (Core) 数据库 psql (PostgreSQL) 10.5 2台机器ip : 172.17.0.3 /172.17.0. ...
- 在Docker中安装配置Oracle11g并实现数据持久化
1.拉取镜像 docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11g 镜像详情:https://dev.aliyun.com/ ...
- Spring MVC 处理JSON | JSONP类型数据
SpringMVC返回JSON格式的数据: 1 添加jar包(gson-2.8.0.jar): <dependency> <groupId>com.google.code.gs ...
- Fragment与Radiogroup联动，经典的主界面布局。使用show和hide的方式实现；
Fragment+RadioGroup经典的主界面布局,方便实用: 1.使用replace方式: 直接上代码,先是布局文件: <?xml version="1.0" enco ...
- 在html中使用thymeleaf编写通用模块
在编写页面时,常常会需要用到通用模块,比如header部分.footer部分等. 项目前端使用的是themeleaf模板引擎,下面简单介绍下使用themeleaf写header通用模块: 1. 通用部 ...
- iPhone投影
iPhone投影到Mac上面的操作,用QuickTime,选择主菜单的新建屏幕录制,然后点击录制按钮右边的箭头,相机切换到iPhone就可以了. 相关操作参照 https://jingyan.baid ...
- Windows系统不同磁盘间的扩容教程
1.windows系统不同磁盘的空间扩展: https://www.cnblogs.com/yunweis/p/8023098.html