JavaScript Set Cursor Style

最新推荐文章于 2023-08-18 10:27:35 发布
最新推荐文章于 2023-08-18 10:27:35 发布
阅读量186 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yydaddy/p/4195853.html
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script language="JavaScript">

    function setCursorByID(id, cursorStyle) {
        var elem;
        if (document.getElementById && (elem = document.getElementById(id))) {
            if (elem.style)
                elem.style.cursor = cursorStyle;
        }
    }

</script>
</head>
<body>
    <span style="cursor: auto;">auto</span>
    <span style="cursor: move;">move</span>
    <span style="cursor: no-drop;">no-drop</span>
    <span style="cursor: col-resize;">col-resize</span>
    <span style="cursor: all-scroll;">all-scroll</span>
    <span style="cursor: pointer;">pointer</span>
    <span style="cursor: not-allowed;">not-allowed</span>
    <span style="cursor: row-resize;">row-resize</span>
    <span style="cursor: crosshair;">crosshair</span>
    <span style="cursor: progress;">progress</span>
    <span style="cursor: e-resize;">e-resize</span>
    <span style="cursor: ne-resize;">ne-resize</span>
    <span style="cursor: default;">default</span>
    <span style="cursor: text;">text</span>
    <span style="cursor: n-resize;">n-resize</span>
    <span style="cursor: nw-resize;">nw-resize</span>
    <span style="cursor: help;">help</span>
    <span style="cursor: vertical-text;">vertical-text</span>
    <span style="cursor: s-resize;">s-resize</span>
    <span style="cursor: se-resize;">se-resize</span>
    <span style="cursor: inherit;">inherit</span>
    <span style="cursor: wait;">wait</span>
    <span style="cursor: w-resize;">w-resize</span>
    <span style="cursor: sw-resize;">sw-resize</span>
    <div>
        <a id="e1h" href="#" style="cursor: help;" onclick="setCursorByID('e1','help');return false;">help</a> 
        <a id="e1w" href="#" style="cursor: wait;" onclick="setCursorByID('e1','wait');return false;">wait</a>
        <a id="e1m" href="#" style="cursor: move;" onclick="setCursorByID('e1','move');return false;">move</a> 
        <a id="e1c" href="#" style="cursor: crosshair;" onclick="setCursorByID('e1','crosshair');return false;">crosshair</a>
        <a id="e1t" href="#" style="cursor: text;" onclick="setCursorByID('e1','text');return false;">text</a> 
        <a id="e1a" href="#" style="cursor: default;" onclick="setCursorByID('e1','default');return false;">default</a> 
        <a id="e1a" href="#" style="cursor: pointer;" onclick="setCursorByID('e1','pointer');return false;">pointer</a> 
        <a id="e1a" href="#" style="cursor: auto;" onclick="setCursorByID('e1','auto');return false;">auto</a>
    </div>
    <div>
        <a id="e1" href="#" onclick="setCursorByID('e1','help');return false;">test</a> 
    </div>
</body>
</html>

原文：http://www.javascripter.net/faq/stylesc.htm

转载于:https://www.cnblogs.com/yydaddy/p/4195853.html

aodai0798
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js set Cursor style.
terry1989的专栏
04-12 1142
http://www.javascripter.net/faq/stylesc.htm Insert title here function setCursorByID(id, cursorStyle) { var elem; if (document.getElementById && (elem = document.getElementById(id))) {
echart图表的两种注册点击事件
Koreyoshi123654的博客
08-03 458
echart图表的两种注册点击事件
javascript获取光标位置以及设置光标位置(兼容firefox)
Noncy的专栏
12-19 2288
在项目开发中经常遇到input等设置光标位置到最后的问题，今天我查了一下Google，找到了在IE、Firefox、Opera等主流浏览器的获取光标位置（getCursortPosition）以及设置光标位置（setCursorPosition）的函数。 function getCursortPosition (ctrl) {//获取光标位置函数 var CaretPos
设置echarts折线图鼠标移入不显示小手
m0_73943225的博客
08-01 1287
echarts重柱状图可以根据配置修改，但是折线图是不生效的。折现图可以根据鼠标移入事件mousemove来设置。
Echarts中自定义图标作为鼠标指针
最新发布
qq_46344419的博客
08-18 870
Echarts中自定义图标作为鼠标指针
jQuery.cursor:使用jQuery标记更改光标的简便方法！
05-01
// set current cursor style relative to document BODY $.cursor('position'); // return current cursor position relative to document page $.cursor('position', 'client'); // return current cursor ...
sprity-css-rollover:在鼠标悬停时提供视频预览效果
05-21
sprity-css-rollover 用于css-rollover样式处理器 提供鼠标悬停时的视频预览效果 如果没有鼠标悬停，则允许使用默认图像 查看 要求 ...-- Set default image: icon-sprite008 --> < div class
javascript生成树型结构
04-23
children.style.display = node.classList.contains('open') ? 'block' : 'none'; } } document.querySelectorAll('.tree-node').forEach(node => { node.addEventListener('click', () => toggleNode(node)); }...
js使用小技巧
07-11
Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...
asp：debug类调试程序
10-31
'' onclick=""javascript:if (document.getElementById(''data#sectname#'').style.display==''none''){document.getElementById(''data#sectname#'').style.display=''block'';}else{document.getElementById(''...
给echart图绑定click等鼠标事件
qq_36877078的博客
02-05 6107
在应用echarts的过程中，有时候需要给echarts绑定click事件 官方参考文档地址：https://echarts.apache.org/zh/api.html#echartsInstance.on myChart.on('click',function (params) { console.log('params',params) }) 此时是可以实现点击效果的，但是有个不友好的地方就是，只有点击折线图节点或者柱图柱子的时候才会触发，达不到只要点击echarts就能实现点击事件的效果，多方
set cursor 设置焦点
05-15 3554
set cursor field 这个是设置鼠标焦点到字段 SET CURSOR 设置到鼠标焦点列还是行 SET CURSOR LINE 设置鼠标焦点到行 这个是设置鼠标焦点的。 GET CURSOR  field  这个相对应的获取鼠标焦点得到的字段
JS获取和设置光标的位置
℡メ㏑╭ァ小凯
10-12 4921
function getCursortPosition (ctrl) {//获取光标位置函数 var CaretPos = 0; // IE Support if (document.selection) { ctrl.focus (); var Sel = document.selection.createRange (); Sel.moveStart ('character',
java setCursor 改变光标形状
qq_40798054的博客
01-04 6377
大家都知道，鼠标的光标在不同的状态下呈现出不同的形状，但是怎么实现鼠标形状的改变的呢，现在我简单的说一下它的实现。在java.awt.Cursor这个类中有鼠标的多种形状  CROSSHAIR_CURSOR            十字光标类型。  CUSTOM_CURSOR            与所有定制光标有关的类型。  DEFAULT_CURSOR            默认光标
浏览器是先执行js还是先加载HTML,在HTML中使用JavaScript（浏览器对js的加载机制分析）...
weixin_39974557的博客
06-05 1652
前言：向HTML页面中插入JavaScrip的主要方法，就是使用标签。主要探讨标签的在HTML页面的渲染机制。对应的业务场景：从js的加载机制，去优化首次加载页面白屏时间过长的问题要点：1.script标签用外链的src引入文件时，内嵌的js代码无效。2.只要不存在defer和async属性，浏览器都会按照script元素在页面中出现的先后顺序对他们依次进行解析(文件下载和代码执行)。换句话说，在...
echarts设置滑过可点击区域时将鼠标变为小手样式（一般与区域点击事件结合使用）
pingmeiniu的博客
07-23 6482
myChart.getZr().on('mousemove', param => { var pointInPixel= [param.offsetX, param.offsetY]; if (myChart.containPixel('grid',pointInPixel)) {//若鼠标滑过区域位置在当前图表范围内 鼠标设置为小手 myChart.getZr().setCursorStyle('pointer') ..
unity鼠标光标样式改变
lvmengmeng
12-11 5641
通过搜集网上鼠标光标形状改变，整理如下 1.将下面javascript代码，将它挂在任意对象上即可，然后将手形状的图片拖动面板中，这种方法比较简单，写的代码也比较少 var mouse : Texture; Screen.showCursor=false; function Update () { } function OnGUI() { var msPos = Input.mou
使用JavaScript验证留言板
06-02
-5）："; int choice; cin >> choice; switch (choice) { case 0: exitFlag可以使用JavaScript来增强留言板的验证功能，确保用户输入的数据符合要求。以下是一个简单的JavaScript验证留言板的示例： ```html <!DOCTYPE html> <html> <head> <title>留言板</title = true; cout << "程序已退出！" << endl; break; case 1: cout << "请输入> <style> .container { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f2f2f2; border: 1px solid #ccc; box-shadow: 0学生信息（姓名 年龄 性别 学号 成绩）：" << endl; string name, gender, id; int 0 10px #ccc; } form { display: flex; flex-direction: column; align-items: age; float score; cin >> name >> age >> gender >> id >> score; studentManager.addStudent(Student(name, age center; } input[type="text"], textarea { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box, gender, id, score)); cout << "学生信息已添加！" << endl; break; case 2: ; } input[type="submit"] { background-color: #007bff; color: #fff; border: none cout << "请输入要删除的学生学号："; cin >> id; studentManager.deleteStudent(id); cout; padding: 10px 20px; border-radius: 5px; cursor: pointer; } .message { margin-bottom: 20px; padding: 10px; background-color: #fff; border: 1 << "学生信息已删除！" << endl; break; case 3: cout << "请输入要修改的px solid #ccc; border-radius: 5px; box-shadow: 0 0 10px #ccc; word-break: break-all; } .message p:first-child { font-weight: bold; margin-bottom: 5px; 学生学号和新的学生信息（姓名 年龄 性别 学号 成绩）：" << endl; string newName, } .message p:last-child { font-style: italic; font-size: 12px; color: #999 newGender, newId; int newAge; float newScore; cin >> id >> newName >> newAge >> newGender; } .error { color: red; font-size: 12px; margin-top: 5px; } </style> </head> <body> <div class="container"> <h1>留言板</h1 >> newId >> newScore; studentManager.updateStudent(id, Student(newName, newAge, newGender, newId, newScore> <form action="#" method="post" onsubmit="return validateForm()"> <label for="name">姓名：</label> <input type="text" id="name" name="name" required> <label for="email">邮箱：</label> )); cout << "学生信息已修改！" << endl; break; case 4: cout << "请输入<input type="text" id="email" name="email" required> <label for="message">留言：</label> <textarea id="message" name="message" rows="5" required></textarea> <input type="submit" value="提交留言要查找的学生学号："; cin >> id; studentManager.findStudent(id); break; case "> </form> <div id="messages"> <!-- 这里是留言展示区 --> </div5: studentManager.displayAll(); break; default: cout << "输入有误，请重新输入！" << endl> </div> <script> function validateForm() { var name = document.getElementById("name").value; var email = document.getElementById("email").value; var message = document.getElementById("message").value; var error = document.getElementById("error"); ; break; } } return 0; } ``` 该学生管理系统共有两个类：`Student if (name == "") { error.innerHTML = "请输入您的姓名"; return false; } if (email == "")` 和 `StudentManager`，其中 `Student` 类用于表示学生信息，`StudentManager` 类用于管理学生 { error.innerHTML = "请输入您的邮箱"; return false; } if (message == "") { error.innerHTML = "请输入留言内容"; return false; } return true; } </script> </body> </html信息。在 `Student` 类中，定义了私有属性 `name`、`age`、`gender`、`id`> ``` 在这个示例中，我们添加了一个JavaScript函数`validateForm()`来验证表单数据。该函数首 和 `score`，分别表示学生姓名、年龄、性别、学号和成绩。同时，定义了公先获取表单中的姓名、邮箱和留言内容，然后检查这些值是否符合要求。 如果任何一个值为空，函数会在页面上显示一个错误信息。否则，函数会返回`true`，表单将被有方法 `setInfo`、`getName`、`getAge`、`getGender`、`getId`、`getScore`提交。 在表单元素中，我们添加了一个`onsubmit`属性，用于调用`validateForm()`函数。 和 `display`，分别用于设置、获取和显示学生信息。在 `StudentManager` 类中，定义了私这样，在用户单击提交按钮时，表单数据将被先提交给JavaScript函数进行验证，只有在验证通过后才会将表单数据提交给服务器。 在代码中，我们还添加了一个`<div>`元素来展示错误信息有属性 `students`，用于存储所有学生信息。同时，定义了公有方法 `addStudent`、`delete。如果用户未输入必填字段，错误信息将显示在该元素中。 通过这些步骤，您可以使用JavaScript来增强留言板的验证功能，确保用户输入的数据符合要求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值