javascript如何删除子节点属性-js教程-PHP中文网

javascript如何删除子节点属性

醉折花枝作酒筹

发布： 2021-06-11 17:16:05

原创

2566人浏览过

在javascript中，可以使用removeAttribute方法删除子节点属性，语法格式为“removeAttribute(元素的属性名)”。removeAttribute方法删除指定的属性。

javascript如何删除子节点属性

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

在 JavaScript 中，使用元素的 removeAttribute() 方法可以删除指定的属性。用法如下：

removeAttribute(name)

登录后复制

参数 name 表示元素的属性名。

示例1

下面示例演示了如何动态设置表格的边框。

立即学习“Java免费学习笔记（深入）”；

<script>
  window.onload = function () { //绑定页面加载完毕时的事件处理函数
    var table = document.getElementByTagName("table")[0]; //获取表格外框的引用
    var del = document.getElementById("del");
    var reset = document.getElementById("reset");
    del.onclick = function () {
      table.removeAttribute("border");
    }
    reset.onclick = function () {
      table.setAttribute("border", "2");
    }
</script>
<table width="100%" border="2">
  <tr>
    <td>数据表格</td>
  <tr>
</table>
<button id="del">删除</button><button id="reset">恢复</button>

登录后复制

在上面示例中设计了两个按钮，并分别绑定了不同的事件处理函数。单击“删除”按钮即可调用表格的 removeAttribute() 方法清除表格边框，单击“恢复”按钮即可调用表格的 setAttribute() 方法重新设置表哥便可的粗细。

示例2

下面示例演示了如何自定义删除类函数，并调用该函数删除指定类名。

<script>
  function hasClass (element, className) { //类名检测函数
    var reg = new RegExp ('(\s|^)' + className + '(\s|$)');
    return reg.test (element, className); //使用正则检测是否有相同的样式
  }
  function deleteClass (element, className) {
    if (hasClass (element, className)) {
      element.className.replace (reg, ' '); //捕获要删除样式，然后替换为空白字符串
    }
  }
</script>
<p id="red" class="red blue bold">盒子</p>
<script>
  var red = document.getElementById ("red");
  deleteClass (red, 'blue');
</script>

登录后复制

上面代码使用正则表达式检测 className 属性值字符串中是否包含指定的类名，如果存在，则使用空字符串替换掉匹配到的子字符串，从而实现删除类名的目的。

removeAttribute与removeAttributeNode方法异同

removeAttribute

移除节点指定名称的属性。示例如下

document.getElementById('riskTypePie').removeAttribute("style");

登录后复制

removeAttributeNode

注：此方法不兼容IE。

使用方法：

获取要删除属性的元素
获取该元素要删除的属性
.removeAttributeNode

var node=document.getElementById('chartWrap');
var attr=n.getAttributeNode('style');
node.removeAttributeNode(attr);

登录后复制

异同分析

相同点

两个方法都是用来移除节点属性
两种方法调用者都只能是标签节点

不同点

removeAttribute方法接收的是要删除属性的名字
removeAttributeNode方法接收的是要删除的属性节点它本身
javascript动态添加、修改、删除对象的属性与方法详解

【推荐学习：javascript高级教程】

以上就是javascript如何删除子节点属性的详细内容，更多请关注php中文网其它相关文章！