js改变鼠标的形状和样式的方法

当今多数浏览器支持一下指针样式（将鼠标移动到样式名称上以观察指针样式改变为那个样式）：
auto move no-drop col-resize
all-scroll pointer not-allowed row-resize
crosshair progress e-resize ne-resize
default text n-resize nw-resize
help vertical-text s-resize se-resize
inherit wait w-resize sw-resize
在windows internet explorer 6.0或者更新版本，上面的指针样式如下：

要通过脚本改变某一个元素的鼠标指针样式，你可以把元素的属性element.style.cursor设为上面的任何一个值。（另外一种不用javascript的方法，可以在元素的html标签中使用属性）：


代码如下:

function setcursorbyid(id,cursorstyle) {
if (document.getelementbyid) {
if (document.getelementbyid(id).style) {
document.getelementbyid(id).style.cursor=cursorstyle;
}
}
}

补充一个常用的改变鼠标样式的方法：如果你想鼠标移动到某个元素上改变鼠标样式 就在这个元素的样式里加上 cursor:(你想改的样式)。

赞 (0)

相关推荐

  • js获得鼠标的坐标值的方法

    复制代码 代码如下: var x , y; //当需求为获得的坐标值相对于body时,用: function positionBody(event){ event = event||window.event; //获得相对于body定位的横标值: x=event.clientX //获得相对于body定位的纵标值: y=event.clientY } //当需求为获得的坐标值相对于某一对象时,用: function positionObj(event,id){ //获得对象相对于页面的横坐标值:

  • Js鼠标跟随代码小手点击实例方法

    Js鼠标跟随代码小手点击实例方法

    可爱的鼠标跟随 html{ background:#000;} body,html,input{ cursor:none;} body,html{ height:100%;} #cursor{ position:absolute; left:100px; top:100px; display:block;} window.onload = function(){ var oCursor = document.getElementById("cursor"); document.onmo

  • js鼠标悬浮出现遮罩层的方法

    本文实例讲述了js鼠标悬浮出现遮罩层的方法.分享给大家供大家参考.具体实现方法如下: html页面代码: 复制代码 代码如下: <ul class="site-tag fl">          <li><a data-title="科学" href="#"><i style="background-image: url(images/xiaozhan/main_ojls_1aa60002008

  • JS 获取鼠标左右键的键值方法

    function test() { alert(event.x+" "+event.y); alert(event.button); } /*右键菜单不显示*/ document.oncontextmenu=function() { return false; } /*document.onmousedown=function() { if(event.button==1) {alert("left")} if(event.button==2) {alert(&qu

  • js实现鼠标悬浮给图片加边框的方法

    本文实例讲述了js实现鼠标悬浮给图片加边框的方法.分享给大家供大家参考.具体实现方法如下: html代码: <div class="T-s-l fl"> <a href="" class="a1"> <img src="images/11.jpg" width="234" height="368" /> </a><a href=&qu

  • JS获取鼠标坐标的实例方法

    复制代码 代码如下: var restrictX;  var restrictY;  var tip;  // 鼠标坐标   function mousePosition(ev) {  return {          x : ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,          y : ev.clientY + document.documentElem

  • 一个简单的JS鼠标悬停特效具体方法

    首先,需加载jquery库(略过). 其次,将下面 Javascript代码加到页面的头部:  复制代码 代码如下: <script type='text/javascript'>    jQuery(document).ready(function($){    $('a').hover(function()    {    $(this).stop().animate({'left': '5px'}, 'fast');    }, function() {    $(this).stop(

  • js判断鼠标左、中、右键哪个被点击的方法

    本文实例讲述了js判断鼠标左.中.右键哪个被点击的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>js判断鼠标左.中.右键哪个被点击-柯乐义</title> <script type="text/javascript"> function whichButton(event) { var btnNum = event.button; if (btnNum==2)

  • js改变鼠标的形状和样式的方法

    js改变鼠标的形状和样式的方法

    当今多数浏览器支持一下指针样式(将鼠标移动到样式名称上以观察指针样式改变为那个样式): auto move no-drop col-resize all-scroll pointer not-allowed row-resize crosshair progress e-resize ne-resize default text n-resize nw-resize help vertical-text s-resize se-resize inherit wait w-resize sw-re

  • js实现鼠标经过表格行变色的方法

    本文实例讲述了js实现鼠标经过表格行变色的方法.分享给大家供大家参考.具体实现方法如下: <script type=text/javascript> <!-- (function(){ var rows = document.getElementById("listdata"); var add = function(){ this.style.backgroundColor="#f3f3f1"; }; var del = function(){

  • js实现鼠标触发图片抖动效果的方法

    本文实例讲述了js实现鼠标触发图片抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>鼠标触发图片抖动效果</title> <style> .shakeimage{ position:relative } </style> <script language="JavaScript1.2"> //configure shake degr

  • jQuery实现鼠标划过修改样式的方法

    本文实例讲述了jQuery实现鼠标划过修改样式的方法.分享给大家供大家参考.具体如下: $(document).ready(function () { //默认情况下样式 $("input:text").attr("style","border:1px solid #7E9DB9;"); //鼠标移入样式 $("input:text").mouseover(function () { $(this).attr("st

  • 在Winform框架界面中改变并存储界面皮肤样式的方法

    在本篇介绍的Winform界面样式改变及存储操作中,是指基于DevExpress进行界面样式的变化.一般情况下,默认我们会为客户提供多种DevExpress的界面皮肤以供个人喜好选择,默认DevExpress提供40余种皮肤样式,用户可以根据自己的喜好,选择较为美观.得体的皮肤,为了方便,我们对用户的皮肤选择进行记录,并可以动态改变. 1.界面皮肤的选择 Winform开发框架(包括混合式Winform开发框架)皮肤如下界面所示. 在皮肤集合中打开,可以看到很多界面皮肤可供选择 上面初始化的皮肤

  • 原生JS实现获取及修改CSS样式的方法

    本文实例讲述了原生JS实现获取及修改CSS样式的方法.分享给大家供大家参考,具体如下: 大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取css样式的方法,希望可以帮助一些需要的人,如果有幸被大牛看到,有更好的办法,欢迎提出!!! 一.行内元素样式获取: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

  • JS实现鼠标滑过链接改变网页背景颜色的方法

    JS实现鼠标滑过链接改变网页背景颜色的方法

    本文实例讲述了JS实现鼠标滑过链接改变网页背景颜色的方法.分享给大家供大家参考,具体如下: 这个小特效很不错,用链接改变网页背景色,鼠标放上链接文字上,网页背景就会跟着变换,想让你的主页更个性一点的朋友,这个代码一定能用上,其实你可在此基础上修改一下代码,改成鼠标放上文字切换样式表,这样整个网页就变了风格,是不是很实用? 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-over-link-cha-bgcolor-demo/ 具体

  • js改变css样式的三种方法推荐

    共用代码: <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:250px;height:250px;border:1px red solid;'; 第二种:用setProperty() div.style.setProperty('width','250px'); div.style.s

  • js改变style样式和css样式的简单实例

    js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Change.html</title> <meta http-equiv="content-t

随机推荐