zoukankan      html  css  js  c++  java
  • 隔行变色

    隔行变色:

    .html:写一个ul标签,里面多放几个li,为了显示更好的效果

    .css :设置宽高,边距和边框,居中显示

    .js :获取所有的Li,通过标签名来获取元素集合;判断奇偶数,给背景设置不同的颜色

      鼠标滑过变成高亮,onmouseover : 当鼠标划上这个元素时,触发这个函数;

      鼠标滑出恢复原色,onmouseout : 当鼠标移出时,触发这个函数;

     
    .css
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    #tab{
    width:500px;
    height:500px;
    margin:30px auto;
    list-style: none;
    }
    #tab li{
    width:100%;
    height:40px;
    text-align: center;
    line-height: 40px;
    border:1px dashed red;
    }
    </style>
    .html
    <ul id="tab">
    <li>隔行变色</li>
    <li>隔行变色</li>
    <li>隔行变色</li>
    <li>隔行变色</li>
    <li>隔行变色</li>
    <li>隔行变色</li>
    <li>隔行变色</li>
    <li>隔行变色</li>
    <li>隔行变色</li>
    <li>隔行变色</li>
    </ul>

    .js

    <script>
    // 获取所有的Li;
    // 通过标签名来获取元素集合;
    var oLis = document.getElementsByTagName("li");
    //console.log(oLis);
    //[{},{},{},{}...]
    // onmouseover : 当鼠标划上这个元素时,触发这个函数;
    // onmouseout : 当鼠标移出时,触发这个函数;
    for(var i=0;i<oLis.length;i++){
    if(i%2===0){
    // 奇数行
    oLis[i].style.background = "red";
    }else{
    oLis[i].style.background = "blue"
    }
    // 新增一个自定义属性;
    oLis[i].bg = oLis[i].style.background;
    oLis[i].onmouseover = function () {
    // 当鼠标滑上执行
    // i =10: 当函数执行时,for循环早已经循环完成;i变成10;
    // console.log(i);// 10;
    // this --> 函数中的this代表被绑定这个元素;
    console.log(this);
    this.style.background = "yellow";
    }
    oLis[i].onmouseout = function () {
    this.style.background = this.bg;
    }
    }
    console.log(i);
    // 鼠标滑过变高亮;
    </script>
  • 相关阅读:
    scrum第二阶段项目冲刺04
    scrum第二阶段项目冲刺03
    scrum第二阶段项目冲刺02
    scrum第二阶段项目冲刺01
    团队项目02——疫情数据分析
    scrum第二阶段项目冲刺
    现阶段本组app与咸鱼的对比
    团队项目第一阶段成果——意见改进
    团队项目第一阶段成果——意见汇总
    文件的合并与分割
  • 原文地址:https://www.cnblogs.com/CCxi/p/9464470.html
Copyright © 2011-2022 走看看