javascript学习笔记（二） 鼠标经过时，改变div块的背景色的代码

HTML部分代码：


代码如下:

<ul>
<li>鼠标经过时改变背景色</li>
<li>鼠标经过时改变背景色</li>
<li>鼠标经过时改变背景色</li>
<li>鼠标经过时改变背景色</li>
</ul>

javascript部分代码：
当鼠标经过时，给li添加class="current"类，鼠标离开时，去除该类，达到改变背景色的目的


代码如下:

window.onload = function() {
var lis = document.getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover = function() {
this.setAttribute("class", "current");
}
lis[i].onmouseout = function() {
this.setAttribute("class", "");
}
}
}

css部分代码：


代码如下:

ul li.current {
background-color:red;
cursor:pointer;
}

上面的代码，主要是方便大家更多的认识js,下面提供一个css实现的版本。

ul li:hover
{
background-color:red;
cursor:pointer;
}

  • 鼠标经过时改变背景色
  • 鼠标经过时改变背景色
  • 鼠标经过时改变背景色
  • 鼠标经过时改变背景色

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 用javascript css实现GridView行背景色交替、鼠标划过行变色，点击行变色选中

    加上鼠标点击选择(其实只是点击后变个颜色,"选择"这个词在这里不合适),顺便把这个直接应用到GridView上,如果是其他的控件,或者直接的HTML,稍加修改也可以用上,这里仅提供一个思路.虽然GridView使用AlternatingRowStyle提供了交替行背景色的问题,但这个东西用着实在不爽,看它生成到HTML的那个table,那叫一个乱啊. 下面是代码,注释应该还算比较详细,比较适合初学者,可以把下面两个文件的代码直接复制到你的项目中直接执行.最下面有文件的下载地址,也可以直

  • Extjs根据条件设置表格某行背景色示例

    话不多说,贴上代码 html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="../extjs3

  • js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色

    后台代码 复制代码 代码如下: /// <summary> /// 数据行绑定事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void gvProduct_RowDataBound(object sender, GridViewRowEventArgs e) {

  • javascript实现随机生成DIV背景色

    随机色有两种格式: 效果预览:http://wjf444128852.github.io/DEMOLIST/JS/test/index.html  1.rgb(xxx,xxx,xxx)  2.#xxxxxx  下面实现两种随机的方法  思路:如何让x都是随机的,  1.中的xxx是0-255之间的随机整数,用Math.random()*255取得0-255之间的随机数,  再Math.floor()保留小数点前面的  2.中的x是0123456789abxdef中的随机6个的组合,  这里可以用

  • js获得网页背景色和字体色的方法

    获得网页的背景色和字体颜色,方法如下: 思想: 通过取得颜色属性值得到的是 rgb 色,不是我们想要的,所以需要将 rgb 色装换为 十六进制色 ,首先获得rgb色 : 复制代码 代码如下: var rgb = document.getElementById('color').style.backgroundColor: 得到格式如下: rgb(225, 22, 23); 然后进行拆分: 复制代码 代码如下: var rgb = rgb.split('(')[1]; //拆分后为 [rgb, 2

  • javascript修改表格背景色实例代码分享

    复制代码 代码如下: <html> <script> //点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) {      var sTable = document.getElementById("ServiceListTable")      for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行      {        

  • JS实现进入页面时渐变背景色的方法

    本文实例讲述了JS实现进入页面时渐变背景色的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>JS实现的进入页面时的渐变的背景色效果</title> <SCRIPT Language="JavaScript"> <!-- 屏幕变色程序 --> function CBgColor(){ var color = 0, step = 1 //color为初始颜色,step为初始步长

  • JS实现点击按钮控制Div变宽、增高及调整背景色的方法

    JS实现点击按钮控制Div变宽、增高及调整背景色的方法

    本文实例讲述了JS实现点击按钮控制Div变宽.增高及调整背景色的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现点击按钮后改变DiV的高度.宽度和背景色等,点击对应按钮,Div调整高度.调整宽度.调整背景色等.实现方面主要是使用JS来控制点击按钮后改变CSS样式文件,这一切都是在JS的动态控制下,比如无刷新切换网页风格的实现,可以以此为基础来扩展. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • Js 随机数产生6位数字

    复制代码 代码如下: <script type="text/javascript"> function MathRand() { var Num=""; for(var i=0;i<6;i++) { Num+=Math.floor(Math.random()*10); } document.getElementById("Lb_Random").innerText=Num; document.getElementById(&qu

  • Javascript 生成指定范围数值随机数

    不过经过俺的小小努力之后, 终于让俺摸着门道喽, 问题也就理所当然滴解决掉. 然后就写了个公式, 这样应该可以消失掉这个用法了, 公式: 1. 从1开始 至 任意值 linenum parseInt(Math.random()*上限+1); 2. 从任意值开始 至 任意值 linenum parseInt(Math.random()*(上限-下限+1)+下限); 上面的公式使用了 parseInt(), 因此要加1; 如果使用 Math.ceil() 则不需要加1, 俺习惯于这样写... 目录:

随机推荐