Javascript 设置按钮处于活动状态

2024-02-24

我有一个按钮表,一旦填充完毕,我就会使用

document.getElementById("btn0").click();

单击第一个按钮。该按钮正在执行其应该执行的操作,但是按钮的背景颜色并没有像我手动单击它时那样改变。

正如您所看到的,当它运行时,div 的背景颜色正在改变,但按钮未设置为活动状态。

代码片段:

var myfunc = function(){
    document.getElementById("test").style.backgroundColor="red";
};

document.getElementById("btn0").click();
.btn{
  border: none;
  color: white;
  width: 100%;
  padding: 5px 5px 5px 5px;
  height: 50px;
  cursor: pointer;
  font-size: 12px;
  background-color: #343a40;
}

.btn:active .btn.active{
  background-color:green;
  outline: none;
}

.btn:focus{
  background-color:green;
  outline: none;
}

#test{
  background-color: green;
  width: 600px;
  height: 400px;
}
<button class="btn" onclick="myfunc()" id="btn0"> Cool button</button>

<div id="test">
  Hello
</div>

这是我创建的 jsfiddle 的链接:https://jsfiddle.net/58hrwcgo/3/ https://jsfiddle.net/58hrwcgo/3/


有一个区别click and focus. https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css

click()单击元素然后取消聚焦,这与真正的鼠标单击不同,后者单击然后聚焦。

我建议通过执行以下两项操作来模拟真实的点击:

document.getElementById("btn0").click();
document.getElementById("btn0").focus();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript 设置按钮处于活动状态 的相关文章

随机推荐

  • Ubuntu 10.04 64 位上的 Android 开发使用哪个 JDK?

    Ubuntu 10 04 64 位作为 Android 开发环境看起来很有前途 我现在已经启动并运行了它 但我陷入了以下决策点 Synaptic 包管理器有 默认jdk 标准 Java 或 Java 兼容开发套件 sun com 有两个 J
  • C# 类型系统健全且可判定吗?

    我知道Java的类型系统是不健全的 它无法对语义上合法的构造进行类型检查 并且无法确定 它无法对某些构造进行类型检查 例如 如果您将以下代码片段复制 粘贴到类中并编译它 编译器将崩溃并显示StackOverflowException 多么贴
  • 当我使用“pip install mysql-connector”时,“无法找到 Protobuf include 目录”

    当我尝试使用 pip install mysql connector 加载时出现此错误 我也尝试过 pip install Protobuf 但没有解决方案 Python architecture 64 bit Python ARCH 64
  • React-native:node_modules\@react-native-community\masked-view 中缺少 index.js 文件

    我在构建反应本机应用程序时收到以下错误 react native community masked view and react navigation stack是最新的 但不确定为什么在构建时没有解决这个包 error Error Whi
  • 如何使用 matplotlib/python 绘制 ROC 曲线 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想绘制一条 ROC 曲线python with matplotlib并想像这样展示它 假设我们有 0 0 到 1 0 的预测y sc
  • 静态存储持续时间初始化

    在 C 中 静态存储持续时间对象以未指定的顺序初始化 同一编译单元中的除外 代码如下 include
  • jQuery Mobile 谷歌通用分析

    我很高兴使用这个最佳实践http roughlybrilliant com jquery mobile best practices 7 http roughlybrilliant com jquery mobile best practi
  • 定时器中断是否独立于系统处于内核模式还是用户模式?

    在Linux单处理器系统中 定时器中断是否与系统处于内核模式还是用户模式无关 当系统处于内核模式时 定时器中断有什么不同的行为吗 简单的答案是 硬件时钟中断服务例程的执行和动态定时器处理程序的调度都不受硬件时钟中断之前系统所处模式的影响 原
  • 如何观察服务类中的实时数据

    我想将从 API 获得的一些记录插入到我的数据库中 我正在使用服务类来执行此过程 我试图在服务类中使用实时数据的概念 但它要求我的服务类是生命周期所有者 我一直在思考如何让我的服务类观察者实时数据的变化 任何帮助都会很好 如果您的服务不应受
  • Haskell 中类似 OO 的接口实现

    尽管有这个标题 我不会仅仅询问 OO 世界和 Haskell 之间的翻译 但我想不出更好的标题 此讨论类似于但不等于this one https stackoverflow com questions 5474171 oo interfac
  • 按位运算如何提高 Asm.js 的性能?

    在 Asm js 定义的第一行有一个基于 Asm js 的代码示例 它解释了按位运算有助于获得更快的 JS 代码 HEAP32 p gt gt 2 0 or x y 0 我的问题是 这个操作如何提高性能 在 Asm js 或 Emscrip
  • Drools 知识库 已弃用

    我正在将 Drools 规则引擎集成到我的应用程序中 我发现的 99 的入门示例如下 KnowledgeBuilder kbuilder KnowledgeBuilderFactory newKnowledgeBuilder kbuilde
  • 如何验证 WTForms 中的日期字段

    在我的 Flask 应用程序中 我有一个 WTForm 其中有两个日期选择器 分别用于 开始日期 和 结束日期 验证 结束日期 不早于 开始日期 的最佳方法是什么 from flask wtf import FlaskForm from w
  • .NET 自定义事件组织帮助

    作为 C 的新手 我最近一直在研究自定义事件 虽然我认为我现在了解设置自定义事件所需的基本部分 但我无法确定where每件作品都属于 具体来说 这就是我正在尝试做的事情 我有一个表示内部数据结构布局的树控件 当数据在树中重新排列 通过拖放
  • 傅立叶级数数据与 numpy 的拟合:fft 与编码

    假设我有一些数据 y 我想对其进行傅立叶级数拟合 对此post https stackoverflow com questions 4258106 how to calculate a fourier series in numpy 解决方
  • HttpClient 不从 CookieContainer 发送 cookie

    我正在使用 Visual Studio 2012 开发带有 WPF NET 4 0 客户端的 ASP WebAPI ASP MVC 4 应用程序 客户端需要登录到服务器 我使用带有身份验证 cookie 的 FormsAuthenticat
  • MS Access 子表单在表单视图中带有#Error 字段

    微软访问 2003 我在子表单后面有一个查询 其中有如下 sql 语句 SELECT ClientTotalInvoiceLineItems CDate GetWeekEnding WeekEnding1 WeekEnding2 WeekE
  • 使用内容配置作为文件名下载 Node.js 文件

    我正在使用 Request 模块下载文件 但是当文件名必须来自 Content Disposition 标头时 我不太确定如何将响应传输到输出流 所以基本上 我需要读取响应直到找到标头 然后将其余部分通过管道传输到该文件名 这些示例显示如下
  • 检查残差并可视化零膨胀泊松 r

    我正在为 CPUE 数据运行零膨胀模型 该数据有零通货膨胀的证据 我已通过 Vuong 测试 在下面的代码中 确认了这一点 根据 AIC 的说法 完整模型 zint 优于零模型 我现在想要 检查完整模型的残差以确定模型拟合 由于缺乏来自同事
  • Javascript 设置按钮处于活动状态

    我有一个按钮表 一旦填充完毕 我就会使用 document getElementById btn0 click 单击第一个按钮 该按钮正在执行其应该执行的操作 但是按钮的背景颜色并没有像我手动单击它时那样改变 正如您所看到的 当它运行时 d