js改变鼠标的形状和样式.docVIP

js改变鼠标的形状和样式 JS实现鼠标悬停更换样式名称onMouseOver 以及改变对象样式名称函数 下面介绍几种常见的事件（还用更多事件，请查阅相关资料）： onClick：鼠标单击事件。（是指鼠标按下，然后松开时产生。） onDblClick：鼠标双击事件。（是指鼠标快速按下，松开，并再次按下时产生。） onMouseDown：鼠标按下事件。（鼠标按下时即产生。） onMouseUp：鼠标释放事件。（是指鼠标从按下的状态到弹起。） onMouseMove：鼠标移动事件。（是指在特定元素上移动鼠标。） onMouseOver：鼠标经过事件。（是指，当指针从外界往元素上移动时产生。） onMouseOut：鼠标离开事件。（是指鼠标从特定元素上离开时产生。） onLoad：载入事件。（当图象或页面结束载入时产生。） onUnload：卸载事件。（当访问者离开页面时产生。） onScroll：滚动条滚动事件。（当访问者使用卷轴上移或下移时产生。） 将这个自定义样式应用到图片上，在浏览器中预览到图片变成了黑白，我们再定义一个样式“.over”，这个样式没有任何内容，是空样式，样式表代码如下： style type=text/css !-- .over {} .out {filter: Gray} -- /style 然后加上“onMouseOver=this.className=over onMouseOut=this.className=out”，意思为当鼠标经过时，图片为over样式，即彩色正常图象；当鼠标离开时，图片为out样式，即黑白图象。 这样这个效果就完成了，保存后在浏览器里打开，图象是黑白的，当鼠标移上去时，图象变成彩色，鼠标离开时，图象又变回黑白。只要发挥你的想象，通过this.className方法还可以做出很多好看的鼠标效果。 原文地址：/blog/static/2662132720083883055638/ JS改变元素的样式名称： style body{font-size:12px; padding-top:32px;} div{width:600px; text-align:center; margin:0px auto; height:42px;} .c1{border:1px solid blue;} .c2{border:1px solid #ff0000;} /style js代码如下： script function get1() { document.getElementById(div1).className=c1; } function get2() { document.getElementById(div1).className=c2; } /script 网页内容如下： div id=div1/divbr / divinput type=button value=边框蓝色 onclick=get1() / nbsp; input type=button name=button id=button value=边框红色 onclick=get2() //div 主要通过 getElementById()改变Div的样式属性，从代码中已经很直观表现出来了。 点击按钮 边框蓝色，调用 Get1()函数，改变Div1的样式属于为“div c1”，这样子就可以实现通过Js改变Div的颜色， 同样原理可以应用到其它属性上。 本文转自：【蚂蚁学院】 文章地址：/newshow.php?id=17 用JS直接改变元素的style某项属性写法： 改变div1元素的背景颜色： document.getElementById(div1).style.backgroundColor=#003366″ 同时改变div1元素的几项样式： document.getElementById(div1).style.cssText=border-collapse:collapse;border-spacing:1;border:1 solid #0B2565;background-color:white;color:black; 使用js操作css属性的写法是有一定的规律的： 1、对于没有中划线的css属性一般直接使用style.属性名即可。 如：obj.style.margin，obj.style.width，obj.style.left，obj.style.position等。 2、对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。 如：obj.style.marginTop，obj.style.borderLeftWidth，obj.style.zInd