當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript - 自定义属性 -
生活随笔
收集整理的這篇文章主要介紹了
JavaScript - 自定义属性 -
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
自定義開關 (onOff)
點擊事件的倆個樣式
<!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 media="screen">li {float: left;width: 100px;height: 100px;margin: 10px;background-color: blue;}.active {background-color: red;}</style> </head> <body><ul><li></li><li></li><li></li></ul><script type="text/javascript">var aLi = document.getElementsByTagName('li');for (var i = 0; i < aLi.length; i++) {aLi[i].onOff = true;aLi[i].onclick = function () {if (this.onOff) {this.className = 'active';}else {this.className = '';}this.onOff = !this.onOff;}}</script> </body> </html>自定義數組（arr、num）
求數組用num
我覺得有點類似于輪播圖的按鈕功能
自定義索引值（index）
類似于選項卡
<!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> </head> <body><input type="button" name="" value="btn1"><input type="button" name="" value="btn2"><input type="button" name="" value="btn3"><p>a</p><p>aa</p><p>a</p><script type="text/javascript">var aBtn = document.getElementsByTagName('input');var aP = document.getElementsByTagName('p');var arr = ['莫濤',' 張森','杜鵬']for (var i = 0; i < aBtn.length; i++) {aBtn[i].index = i; //自定義屬性（索引值）aBtn[i].onclick = function () {this.value = arr[this.index];aP[this.index].innerHTML = arr[this.index];}}</script> </body> </html>數組 + 取余の小練習
鼠標進入顯示 灰色
鼠標移開顯示 原本顏色
總結
以上是生活随笔為你收集整理的JavaScript - 自定义属性 -的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小白理解k-svd算法
- 下一篇： android 六棱形分析图,[转载]菱