如何在html中直接给某个按钮置灰（样式、去除绑定事件）, querySelector与jquery selector的不同之处

最新推荐文章于 2022-12-08 22:53:50 发布
最新推荐文章于 2022-12-08 22:53:50 发布
阅读量4.6k 收藏 1
点赞数
分类专栏： 前端/HTML 前端/Javascript 文章标签： html jquery 注释 event script同步加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_36487770/article/details/78344711
版权
本文介绍了如何在HTML中直接通过样式设置将按钮置灰，并讨论了在不使用jQuery的情况下，如何避免JavaScript事件绑定的问题。强调了在DOM元素未加载完成时直接使用querySelector可能引发的错误，并提出通过改变DOM元素class实现事件解除的简便方法，同时提醒注意CSS样式的同步调整。
摘要由CSDN通过智能技术生成

今天接到了一个需求要置灰某个暂时停用的按钮，突然间想到了一个特别投机取巧的方式！

一般的做法是，找到对应的CSS和JS文件，然后更改和注释掉对应的元素和事件，但有时候CSS和JS都被压缩成一坨了，不是非常好搞，所以最简单的方法就是直接在html里改动。

样式可以用“style=” ”的方式直接加载标签中。那事件怎么做呢？

一个当然的思路是使用第三方库，比如jquery直接off掉该事件，但要考虑到script的位置通常位于body的底部，而html文件中的< script>标签中的代码或src引用的js文件中的代码是同步加载和执行的，因此，如果直接在dom后写

<div id="demo"></div>
......
<script type="text/javascript">
  $(demo).off(
最低0.47元/天 解锁文章
十方魔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中实现button按钮变灰不可用，可用的方法
Abracadabra__的博客
03-08 2万+
1、使button按钮onclick函数失效，按钮变灰，同时光标不显示手型 document.getElementById("commitbtn").onclick = "return false;"; document.getElementById("commitbtn").style.backgroundColor = "gray...
HTML 网页特效 点击按钮全屏变灰
09-12
HTML 网页特效 点击按钮全屏变灰 挡住后面所有的东西
html按钮点一次置灰
copyright0501的博客
09-28 2148
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> function copyText() { document.getElementById("field2").value=document.g...
将button置灰
weixin_30767835的博客
09-26 897
让button置灰，功能不可用 如图：确认键不可用 在button中添加： disable="true" 转载于:https://www.cnblogs.com/caroline-z/p/5909747.html
html更改灰色按钮可用,点击提交按钮后按钮变灰色不可用状态的三种方法
weixin_31881651的博客
06-09 4554
第一种方法：直接按钮中加入当点击提交后，提交按钮变灰色不可用，这样可有效防止重复提交，本代码就是实现这样一个功能。从代码就可以看出，我们只需在提交按钮上加入这一句： onclick="javascript:{this.disabled=true;document.form1.submit();}"，意思是当按钮点击后，将按钮的不可用属性设置为true，这样按钮就变灰了表单提交后按钮变成灰色[Ctr...
给网站添加灰白滤镜（默哀主题色）
笔记
04-04 1990
默哀专用，添加在html根节点或者body节点，致敬英烈们，感恩你们的守护~~ 1、天猫 html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filte...
修改绑定手机号Tab切换样式时间线样式
06-01
在IT行业中，网页交互设计是提升用户体验的关键环节之一。标题"修改绑定手机号Tab切换样式时间线样式"提及的是一项关于优化网页中用户流程的操作，特别是涉及到手机号绑定这一常见功能的界面设计。描述中的"时间线...
CSS3滑杆开关切换按钮.zip
11-17
使用 `document.querySelector()` 或 `jQuery('selector').on()` 方法可以绑定事件监听器，并在事件触发时执行相应的逻辑。例如，我们可以更新其他元素的样式、发送AJAX请求或执行其他业务逻辑。jQuery 提供了一套...
jQuery对象与DOM对象转换方法详解
10-22
jQuery对象和DOM对象是两个不同的概念，但它们在实际编程中经常需要互相转换，以便于利用各自的优点。下面我们将深入探讨这两种对象及其转换方法。 **jQuery对象** 是jQuery库中的一个集合，它封装了DOM元素，提供...
jQuery投资网站弹出框确认表单代码.zip
11-22
在IT行业中，前端开发是构建网页或Web应用的关键部分，涉及到用户与页面交互的界面设计。这个名为"jQuery投资网站弹出框确认表单代码.zip"的压缩包，显然是为前端开发者提供了一套使用jQuery实现的投资网站弹出框...
css样式的灰色格调的按钮布局
05-23
不错的灰色样式的按钮
html,jquery,css API
06-05
例如，使用`$(document).ready()`可以在页面加载完成后执行代码，而`$('selector').click(function() {})`则简化了事件绑定。 **三者之间的协同工作** 在实际开发中，HTML定义了网页的结构，CSS负责样式，而jQuery...
html表单按钮灰色,点击提交按钮后按钮变灰色不可用状态的三种方法
weixin_39996141的博客
06-07 3512
第一种方法：直接按钮中加入当点击提交后，提交按钮变灰色不可用，这样可有效防止重复提交，本代码就是实现这样一个功能。从代码就可以看出，我们只需在提交按钮上加入这一句： onclick="javascript:{this.disabled=true;document.form1.submit();}"，意思是当按钮点击后，将按钮的不可用属性设置为true，这样按钮就变灰了表单提交后按钮变成灰色[Ctr...
html实现网站全局按钮点击后置灰，不允许连续点击
dingsi7709的博客
06-16 457
1 <script> 2 document.addEventListener("mouseup", upHandler, true); 3 function upHandler(e){ 4 var target=undefined; 5 //元素类型即BUTTON 6 if(e.targ...
struts1的html:select标签 变灰 禁用下拉
匣子疯子
10-15 430
struts1的html:select标签 变灰 禁用下拉         &lt;html:select property="XX"  disabled="true"&gt;   &lt;/html:select &gt;
网页快速置灰效果
zezejingi的博客
12-08 808
网页快速置灰效果
jquery选择器（selector）& 事件处理
aigo_2021的博客
05-22 2257
一、选择器（selector） 可以通过选择器获得某个或某些元素对象。通过jQuery函数结合选择器获得某个或某些元素对象的jquery对 象。 1. 基本选择器 id选择器 <html lang="en"> <head> <title>Document</title> <script src="js/jquery-3.2.1.js"></script> <script> $
button disabled置灰的一个小例子，自己用
weixin_34066347的博客
06-20 306
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script> <scr...
弹出弹窗后，如何禁止底层的body滚动，适用于超长的页面
热门推荐
凝视深渊
01-04 4万+
常见场景 从event target入手 还是直接干body吧 conclusion 常见场景 在许多填写表单的页面中，都会弹出一个选择器，让你在弹窗中选择项目。有时，弹窗本身容纳不下内容，需要让它不断滚动来展示，但因为事件是冒泡的，有时就会造成底部（body 的Z-index肯定是在下面的 ）的内容也在滚动。这内外一起滚，就有点尴尬了。 举例，下面两张图里，都有类似的问题。那
document.querySelector()在jQuery中对应的是什么
最新发布
05-29
在 jQuery 中，document.querySelector() 对应的是 $(...) 或 jQuery(...)，即 jQuery 的选择器函数。例如，document.querySelector('#myElement') 可以写成 $('#myElement') 或者 jQuery('#myElement')。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值