javascript如何删除子节点属性


本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。

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

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

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

1

removeAttribute(name)

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

示例1

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<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

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

1

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

removeAttributeNode

注:此方法不兼容IE。

使用方法:

  • 获取要删除属性的元素

  • 获取该元素要删除的属性

  • <元素>.removeAttributeNode<属性>

1

2

3

var node=document.getElementById('chartWrap');

var attr=n.getAttributeNode('style');

node.removeAttributeNode(attr);

异同分析

相同点

  • 两个方法都是用来移除节点属性

  • 两种方法调用者都只能是标签节点

不同点

  • removeAttribute方法接收的是要删除属性的名字

  • removeAttributeNode方法接收的是要删除的属性节点它本身

  • javascript动态添加、修改、删除对象的属性与方法详解

【推荐学习:javascript高级教程

以上就是javascript如何删除子节点属性的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

怎么获取json的key

带你了解js中[]、{}、()区别(详解)

chrome如何实时修改javascript

jquery 过时了吗?

js如何实现多图与单图的上传显示

js 怎么判断数字相等

一分钟了解js中int和string的转换(附代码)

js filter是什么意思

如何实现图片懒加载?

vue全家桶有哪些

更多相关阅读请进入《js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...