js---05 自定义属性
2024-08-31 17:54:14
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
li { list-style:none; width:114px; height:140px; background:url(img/normal.png); float:left; margin-right:20px; }
</style>
<script>
window.onload = function (){
var aLi = document.getElementsByTagName('li');
// var onOff = true; // 只能控制一组！
for( var i=0; i<aLi.length; i++ ){
aLi[i].onOff = true;
aLi[i].onclick = function (){
// alert( this.style.background );
// 背景不能判断
// color red #f00
// 相对路径
if ( this.onOff ) {
this.style.background = 'url(img/active.png)';
this.onOff = false;
} else {
this.style.background = 'url(img/normal.png)';
this.onOff = true;
}
};
}
};
</script>
</head> <body> <ul>
<li></li>
<li></li>
<li></li>
</ul> </body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var aBtn = document.getElementsByTagName('input');
// 想建立“匹配”“对应”关系，就用索引值
var arr = [ '莫涛', '张森', '杜鹏' ];
for( var i=0; i<aBtn.length; i++ ){
aBtn[i].index = i; // 每个都加一个属性，自定义属性（索引值）
aBtn[i].onclick = function (){
// alert( arr[ this.index ] );
this.value = arr[ this.index ];
};
}
};
</script>
</head> <body> <input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" /> </body>
</html>
window.onload = function (){
var aBtn = document.getElementsByTagName('input');
// aBtn[0].abc = 123; // 自定义属性
// alert( aBtn[0].abc );
// aBtn[0].abc = 456;
// JS 可以为任何HTML元素添加任意个 自定义属性
for( var i=0; i<aBtn.length; i++ ){
aBtn[i].abc = 123;
aBtn[i].xyz = true;
}
};
arrLi[i].onclick = function (){
for( var i=0; i<arrLi.length; i++ ){
if( arrLi[i] !=this ){
arrLi[i].className = '';
}
}
if( this.className == '' ){
this.className = 'hover';
}else{
this.className = '';
}
};
for( var i=0; i<aUl.length; i++ ){
aLi = aUl[i].getElementsByTagName('li');
for( var j=0; j<aLi.length; j++ ){
arrLi.push( aLi[j] );
}
}
for( var i=0; i<aH2.length; i++ ){
aH2[i].index = i;
aH2[i].onclick = function (){
for( var i=0; i<aH2.length; i++ ){
if( i != this.index ){
aUl[i].style.display = 'none';
aH2[i].className = '';
}
}
if( this.className == '' ){
aUl[this.index].style.display = 'block';
this.className = 'active';
} else {
aUl[this.index].style.display = 'none';
this.className = '';
}
};
}
最新文章
- jquery.fn.extend与jquery.extend--（初体验二）
- 是时候 UWP 了 !
- swift学习笔记5——其它部分（自动引用计数、错误处理、泛型...）
- 例题：超市买东西的程序。输入商品信息，计算价格，价格满多少元打折。这道题用到结构体，集合，for循环，if else语句
- ViewState压缩技术
- linux下实现tomcat定时自动重启
- ubuntu eclipse CDT 问题
- itext poi 学习之旅 （3）读取数据库信息并由excel展现出来
- Asp.net MVC4之 一个简单的小例子
- Composer PHP依赖管理的新时代
- MongoDB数据库索引构建情况分析
- Android查缺补漏（View篇）--在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0？
- [CSDN_Markdown]使用LaTeX基本数学公式
- Java初学习-常见单词
- Nginx 配置文件优化
- Docker 修改国内镜像地址
- lucene 初探
- 【UVA】11825 Hackers' Crackdown（状压dp）
- @cms_content_list
- stm32 nucleo系列开发板的接口