目录
自定义属性
元素的本质就是对象(元素这个对象是浏览器内置的帮我们去定义好的,包含了很多属性和值都是天生自带的,我们也可以自己去给元素定义属性和值
只要是对象就符合对象的操作(给值就是设置,不给值就是获取)
div.id = "box";
// div.className = "myBox";
div["className"] = "myBox";
// 获取
console.log(div.id);
console.log(div["className"]);
//获取元素
var div = document.getElementsByTagName("div")[0];
// 设置
// 原来没有就是增加
div.hello = "哈喽";
div[""] = "中公教育";
div.zHello = "helloWorld";
console.dir(div);
// 获取
console.log(div.test);//undefined
console.log(div.hello);
console.log(div.zhonggongjiaoyu);
console.log(div.zHello);
自定义索引
自定义索引的本质就是自定义属性,只不过是将属性对应的值赋值为数字
// 自定义索引的本质就是自定义属性,只不过是将属性对应的值赋值为数字
var oLis = document.getElementsByTagName("li");
console.log(oLis);
// 绑定事件
for (var i = 0; i < oLis.length; i++) {
// 自定义索引
oLis[i].aIndex = i;
oLis[i].onclick = function () {
// 事件触发的时候循环已经结束了,i的值就是条件不满足的值
// console.log(i);
// console.log(oLis[i]);
console.log(this);
console.dir(this);
console.log(this.aIndex);
}
}
自定义标识
// 获取元素
var aImg = document.getElementsByTagName("img")[0];
// 自定义标识
var flag = true; //默认值是true 标识当前是默认的状态
// 绑定事件
aImg.onclick = function(){
// 判断
if(flag == true){ //暗的状态
// 变亮
// console.log(this);
// 改变图片的src
this.src = "./img/bright.jpg";
// 重新给flag赋值
flag = false;
}else{ //亮的状态
// 变暗
// 改变图片的src
this.src = "./img/dark.jpg";
// 重新给flag赋值
flag = true;
}
}
选项卡案例
案列简述,点击css显示css对应界面内容,点击Html显示Html内容
<style>
* {
padding: 0;
margin: 0;
}
ul,
ol,
li {
list-style-type: none;
}
.tab {
width: 1226px;
height: 460px;
margin: 50px auto;
border: 1px solid orangered;
}
.tab ul {
height: 30px;
border-bottom: 1px solid orangered;
}
.tab ul li {
line-height: 30px;
float: left;
width: 100px;
text-align: center;
color: #333;