javascript自定义属性的应用
你知道吗?JavaScript可以为任何HTML元素添加任意的自定义属性,而且你可能无意中已经使用过自定义属性了,那么自定义属性通常有哪些应用呢?
1、想用“匹配”、对应关系的时候就用索引值
2、同时控制多组元素
3、开关切换,多组元素开关的切换
就总结到这里,下面来看看几个例子吧
JavaScript自定义属性索引值:
HTML:
<input type="button" value="btn1">
<input type="button" value="btn2">
<input type="button" value="btn3">
JavaScript:
var aInp=document.getElementsByTagName('input'); for (var i = 0; i < aInp.length; i++) {
aInp[i].index=i;//自定义属性,就是通常用的索引值
aInp[i].onclick=function(){
alert(this.index);//弹出当前点击的是第几个按钮,从0开始
}
};
同时控制多组元素:
HTML:
<input type="button" value="0">
<input type="button" value="0">
<input type="button" value="0">
JavaScript:
var aInp=document.getElementsByTagName('input');
var arr=['A','B','C','D','E','F','G'];
for (var i = 0; i < aInp.length; i++) {
aInp[i].num=0;//自定义属性
aInp[i].onclick=function(){
this.value=arr[this.num];
this.num++;
if (this.num===arr.length) {
this.num=0;
};
}
};
自定义属性组开关:
CSS:
.cont{
width: 400px;
margin: 30px auto;
position: relative;
}
.cont input{
height: 100px;
width: 100px;
background: #ddd;
margin-left: 20px;
font-size: 30px;
border:1px solid #ccc;
}
.cont .active{
background: #ffc7d2;
color: #fff;
border:1px solid #fc6d88;
}
HTML:
<div class="cont">
<input type="button" value="btn1">
<input type="button" value="btn2">
<input type="button" value="btn3">
</div>
JavaScript:
var aInp=document.getElementsByTagName('input'); for (var i = 0; i < aInp.length; i++) {
aInp[i].Onoff=true;//自定义属性,切换开关
aInp[i].onclick=function(){
if (this.Onoff) {
this.className='active';
this.Onoff=false;
}
else{
this.className='';
this.Onoff=true;
};
}
};
javascript自定义属性的应用的更多相关文章
- 让 JavaScript 与 CSS 和 Sass 对话
JavaScript 和 CSS 已经并存超过了 20 年.但是在它们之间共享数据非常困难.当然也有大量的尝试.但是我所想到的是一些简单而直观的内容——不涉及结构更改,而是使用 CSS 自定义属性甚至 ...
- javascript:DOM自定义属性的妙用
虽然HTML元素的属性已经十分丰富,但在某些场合下,元素固有的属性无法完成我们的需求: 这个时候,自定义属性就会让问题解决起来比较方便. 比如,下面的栗子: 多张图片点击变化事件:当背景图片为a.jp ...
- javaScript数组的三种属性—数组索引、数组内置属性、数组自定义属性
JS数组也是一种对象. 我们用JavaScript处理的所有东西,都可以视为是一种对象. JavaScript中有两种数据类型,基本类型数对象类型,但是基本类型基本都是包括在对象类型之中的. 数组.函 ...
- JavaScript: 高级技巧: window 对象也可以添加自定义属性
JavaScript: 高级技巧: window 对象也可以添加自定义属性 例如 window.ntName = 'a';例如 window.ntXw = top; 优点是, window 无须等加载 ...
- javaScript 对象的hasOwnProperty方法打印window自定义属性
for (var name in window) { if (window.hasOwnProperty(name)) { window.console.log ( name + " : & ...
- javascript根据元素自定义属性获取元素,操作元素
写在前面:给某个或多个元素自定义属性data-tar,想获取data-tar='123'的元素来进行进一步的操作,如何实现? function getElementByAttr(tag,attr,va ...
- javascript中的自定义属性
标签的自定义属性: 在开发中,有时需要在标签上添加一些自定义属性用来存储数据或状态. 设置了自定义属性的标签,就是在这个标签上添加了这个属性,浏览器中的html结构中可以看到. 使用点语法(如oWra ...
- JavaScript数组自定义属性
我们可以以json键值对的形式自定义属性. 首先定义一个JS数组JSarray. 然后按json键值对的形式进行赋值. 最后在控制台显示结果. 代码如下: var JSarray = new Arra ...
- 自定义属性--JavaScript
1 - 获取属性值 element.属性 获取属性值 element.getAttribute('属性') 区别: element.属性 --获取内置属性(元素本身自带的属性) element.get ...
随机推荐
- [na] centos如何通过vmware Windows共享文件
参考 自我感觉都会使用Windows中的文件.在Windows与linux之间互传文件是一个问题.本方法介绍的是在linux下挂载Windows共享文件夹的方法来实现的 首先安装VMware Tool ...
- C# 版 防止 DNS 污染,获取域名真实 IP 地址
using System; using System.Collections.Generic; using System.IO; using System.Net; using System.Net. ...
- win7系统如何配置JAVA环境变量
1.在“计算机”右击选择“属性” 2.点击“高级系统设置” 3.点击“环境变量” 4.点击系统变量下面的“新建” (1)新建->变量名:JAVA_HOME变量值 C:\Program Files ...
- Unity3D 5中增加WebGL 播放插件
http://www.csdn.net/article/2014-03-18/2818822-Unity-5-game-engine 其实我是搞3d的,这篇文章里所有的术语看了都有很强的亲切感. Un ...
- c++11线程池实现
咳咳.c++11 增加了线程库,从此告别了标准库不支持并发的历史. 然而 c++ 对于多线程的支持还是比較低级,略微高级一点的使用方法都须要自己去实现,譬如线程池.信号量等. 线程池(thread p ...
- MPAndroidChart -- LimitLine的坑
好久没有写博客了,最近比较忙,项目中使用了MPAndroidChart,初次使用也比较蠢,很多API都得一个一个查,但有些时候当你想应该有这个API的时候他却没有,就比如今天的主角LimitLine ...
- 20140710文安c++面试总结
这次去文安面试并未是我想象中的那个样子,可能有如下原因: 1.招聘旺季已过,仅剩下c++这个职位 2.并未做过面试前大公司的面试技巧-做面试题 面试过程基本就是先做面试题: 1.试题分布式-逻辑题.分 ...
- ACM 博弈(难)题练习 (第一弹)
第二弹: 套路&&经验总结: 1. N堆***的游戏,一般可以打表找SG函数的规律.比如CodeForces 603C 2.看起来是单轮的游戏,实际上可能拆分成一些独立的子游戏.比如C ...
- 修改MyEclipse内存
Window ---> preferrences-->installed JREs :点击JDK修改argument为:-Xms512m -Xmx1024m -XX:PermSize= ...
- @RequestParam 注解
@RequestParam 注解org.springframework.web.bind.annotation.RequestParam注解类型用于将指定的请求参数赋给方法中的形参.使用@Reques ...