栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

启用/禁用纯JavaScript中的按钮

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

启用/禁用纯JavaScript中的按钮

disabled

是一个布尔属性,仅它的存在就会导致元素被禁用,无论该属性的值实际是多少。这就是为什么您可以通过将属性设置为来禁用Javascript中的元素
true
的原因,您可以将其设置为任何值(这就是为什么将其设置为
false
禁用状态的原因)。

<input type="button" value="I'm disabled" disabled="true"><input type="button" value="I'm disabled" disabled="false"><input type="button" value="I'm disabled" disabled="doesn't matter"><input type="button" value="I'm disabled" disabled="">

在HTML中,您甚至根本不需要为属性设置一个值:

<input type="button" value="I'm disabled" disabled>

但是,建议使用布尔属性的约定(如果您确实想为属性提供值),以便我们在开发人员之间具有一定的一致性,那就是将其值设置为等于属性名称本身。因此,要禁用Javascript中的元素,请遵循建议的约定:

element.setAttribute("disabled", "disabled");

因此,要 启用
一个元素,您无需将

disabled
属性设置为任何值,因为正如我们所看到的那样,这只会禁用它,您需要
disabled
完全删除该属性:

element.removeAttribute("disabled");document.querySelector("input[type='button']").removeAttribute("disabled");<input type="button" value="I'm NOT disabled" disabled="disabled">

现在,在Javascript中使用DOM对象时,有两种方法可以影响 元素的当前状态, 并且了解使用这两种技术的效果非常重要:

  1. 与工作 元素的当前HTML状态 (与完成
    setAttribute()
    removeAttribute()
    getAttribute()
    )。
  2. 处理内存中元素的元素的 当前DOM对象状态 (通过代表当前状态的Javascript属性完成)。

最重要的是, 属性 值可以不同于 属性
值。
这可能会造成混淆,但是HTML状态是元素从外部看起来的样子,而属性状态是内部真正发生的事情,例如您可以戴上笑脸,以便看着您的人认为您很高兴(
HTML状态),但实际上您可能对真实状态(属性状态)感到难过。

如果尚未设置属性状态,那么属性状态就很重要,并且将完全控制元素的状态。设置属性状态后,它会覆盖任何可能的属性状态,并控制元素的实际状态。

// Get a reference to the buttonvar btn = document.querySelector("[type=button]");// Test what the current HTML state is:console.log(btn.getAttribute("disabled"));// Test what the current mapped property state is:console.log(btn.disabled);// Change the property state, which will override the HTML state and// and cause it to become enabled.btn.disabled = false;// Test what the current HTML state is:console.log(btn.getAttribute("disabled"));  // null because property overrode HTML// Test what the current mapped property value is:console.log(btn.disabled);<input type="button" value="I'm disabled" disabled="disabled">

MDN

要启用该元素,请完全忽略此属性,而不是将值设置为

false



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/514703.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号