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

本文链接：https://blog.csdn.net/weixin_42453826/article/details/88060805

<!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>
      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;
      }
    </style>
</head>
<body>
   <div class=box>
    <div class="aside-box">
        <ul>
            <li  class="aside-item li1">
                <a href="">今日特卖</a>
                <div class="content c2">1</div>
            </li>
            <li class="aside-item li2">
                <a href="">小米电脑</a>
                <div class="content c2">234567889</div>
            </li>
            <li class="aside-item li3">
                <a href="">近日新卖</a>    
                <div class="content c3">3456789</div>
            </li>
        </ul>
    </div>
   </div>
</body>
</html>
<script>
  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.length;i++){
//       items[i].index=i;
//       items[i].onmouseover=function(){
//             //这里来保留数组元素的的
//         var  m  = this.index;
//         //先将所有的元素隐藏
//         for( var i = 0 ; i<divs.length;i++){
//             // 注意i 是下标不能达到数组的长度
//         divs[i].style.display="none";
//         }
//         // 利用数组的坐标保留的地方
//         divs[m].style.display="block";
//       };


// 添加事件可以1.ele.on事件=function(){} 即为匿名函数；
//            2.ele.on事件 = 函数名（）{}
//       items[i].onmouseleave= function(){
//         var  m  = this.index;
//         divs[m].style.display="none";
//       }
      
//     }


// ==========================利用es6新语法来访问 let作用域{}========================================
// for( let i = 0;i<items.length;i++){
//     items[i].onmouseover=function(){
//         for(var m = 0; m<items.length;m++){
//             divs[m].style.display='none';
//         }
//         divs[i].style.display='block';   
//     }
//     items[i].onmouseleave=function(){
//         // for(var m = 0; m<items.length;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.onmouseover=function(){
//     //     divs[i].style.display='block'; 
//     // }
//     console.log(item,i);
// }



</script>