gpt4 book ai didi

JS removeAttribute()方法实现删除元素的某个属性

转载 作者:qq735679552 更新时间:2022-09-27 22:32:09 29 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章JS removeAttribute()方法实现删除元素的某个属性由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

在 JavaScript 中,使用元素的 removeAttribute() 方法可以删除指定的属性。用法如下: 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>
<div id= "red" class= "red blue bold" >盒子</div>
<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方法接收的是要删除的属性节点它本身

到此这篇关于JS removeAttribute()方法实现删除元素的某个属性的文章就介绍到这了,更多相关JS removeAttribute()删除元素属性内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我! 。

原文链接:http://c.biancheng.net/view/5925.html 。

最后此篇关于JS removeAttribute()方法实现删除元素的某个属性的文章就讲到这里了,如果你想了解更多关于JS removeAttribute()方法实现删除元素的某个属性的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com