html小米网站左侧边栏,小米侧边栏（原生js 添加样式，修改样式，以及作用域的问题）...

Document

body,ul{

margin: 0px;

padding: 0px;

}

*{

box-sizing: border-box;

}

li{

height: 100px;

line-height: 100px;

width: 100px;

text-align: center;

cursor: pointer;

list-style: none;

border: 1px solid blue;

}

.box{

width: 800px;

height: 800px;

position: relative;

border: 1px solid red;

}

.aside-box{

width: 100px;

height: 300px;

border: 1px solid blue;

}

.content{

width: 500px;

height: 300px;

border: 1px solid pink;

display: none;

position: absolute;

left: 100px;

top: 0px;

}

• 今日特卖

  1

• 小米电脑

  234567889

• 近日新卖

  3456789

var items = document.getElementsByClassName("aside-item");

var divs = document.getElementsByClassName("content");

// 只改变一个元素的css样式的写法

// divs[0].style.color='red';

// divs[0].style.display = 'block';

//批量改变样式的写法

// 注意写法为 ele.setAttribute("style","属性：属性值;")

// divs[0].setAttribute("style","display:block;;color:red;")

// 主意样式的写法与在style里面的样式相同，属性值不需要加引号；

// divs[0].style.cssText +="display:block;color:red;"

// 注意这里的divs不能读取到style的属性，因为他是一个数组；

// divs.style.cssText = "display:'block';";

// 获取数组中元素的下标：

// array[i].index

// ======================保留数组的下标值访问局部变量=============================

// for( var i =0; i

// items[i].index=i;

// items[i].οnmοuseοver=function(){

// //这里来保留数组元素的的

// var m = this.index;

// //先将所有的元素隐藏

// for( var i = 0 ; i

// // 注意i 是下标不能达到数组的长度

// divs[i].style.display="none";

// }

// // 利用数组的坐标保留的地方

// divs[m].style.display="block";

// };

// 添加事件可以1.ele.on事件=function(){} 即为匿名函数；

// 2.ele.on事件 = 函数名(){}

// items[i].οnmοuseleave= function(){

// var m = this.index;

// divs[m].style.display="none";

// }

// }

// ==========================利用es6新语法来访问 let作用域{}========================================

// for( let i = 0;i

// items[i].οnmοuseοver=function(){

// for(var m = 0; m

// divs[m].style.display='none';

// }

// divs[i].style.display='block';

// }

// items[i].οnmοuseleave=function(){

// // for(var m = 0; m

// // divs[m].style.display='none';

// // }

// divs[i].style.display='none';

// }

// }

// ==============================利用forEach来进行便利=====================================================

// 经证对象数组好像不能用哎

// var Array = [1,2,3,4];

// window.Array.forEach(lmp);

// // items.forEach(lmp);

// function lmp(item,i){

// // item.οnmοuseοver=function(){

// // divs[i].style.display='block';

// // }

// console.log(item,i);

// }