迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

使用 JavaScript 删除“require”属性

作者:迹忆客 最近更新:2022/11/27 浏览次数:

要删除 require 属性,请选择该元素并对其调用 removeAttribute() 方法,将其作为参数传递,例如 input.removeAttribute('require')removeAttribute() 方法将从元素中删除所需的属性。

以下是本文示例的 HTML。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="text" id="first_name" required />

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

const input = document.getElementById('first_name');

// ✅ Remove required attribute
input.removeAttribute('required');

// ✅ Set required attribute
// input.setAttribute('required', '');

我们使用 document.getElementById() 方法选择了输入元素。

然后我们使用 removeAttribute() 方法从元素中删除所需的属性。

该方法将要删除的属性作为参数。

如果元素上不存在该属性,则 removeAttribute() 方法不会抛出错误,它会忽略调用。

设置布尔属性的值时,例如 required,我们可以为该属性指定任何值,它会起作用。

如果该属性完全存在,则无论值如何,其值都被认为是真实的。

如果布尔属性(例如 required)不存在,则该属性的值被认为是假的。

如果需要添加属性,可以使用 setAttribute 方法。

const input = document.getElementById('first_name');

// ✅ Remove required attribute
input.removeAttribute('required');

// ✅ Set required attribute
input.setAttribute('required', '');

该方法将属性名称作为第一个参数,将应分配给属性的值作为第二个参数。

设置布尔属性时,例如必需的,最好将它们设置为空值。 这就是我们在示例中传递一个空字符串作为值的原因。

required 属性可以设置为任何值,只要它出现在元素上,它就可以完成工作。

请注意 ,我们应该只对 DOM 元素调用 removeAttribute() 方法。 如果我们需要从元素集合中删除所需的属性,则必须遍历该集合并对每个单独的元素调用该方法。

这是下一个示例的 HTML。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="text" id="first_name" class="field" required />
    <input type="text" id="last_name" class="field" required />
    <input type="text" id="country" class="field" required />

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

const inputs = document.querySelectorAll('.field');

for (const input of inputs) {
  // ✅ Remove required attribute
  input.removeAttribute('required');
}

我们使用 document.querySelectorAll 方法来选择具有字段类的所有元素。

我们使用 for...of 循环遍历集合并从每个元素中删除所需的属性。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便