html中的删除标签属性，html数据类型错误

爱折腾的小伙伴们，你们有没有遇到过这个问题：想把一个HTML标签的某个属性删除掉，但就是不知道该怎么做呢？有没有试过大补一气把整个标签都重写一遍，结果却又出现了一堆其他的错误？哈哈哈哈，小编我就是这么中过招的。今天我就来告诉大家，如何正确的删除一个HTML标签的属性。

首先，来听听小编我是怎么情况哒。一次我在写网页的时候，突然发现某个标签里的一个属性并不需要了。看了一圈也没找到相关的资料，于是乎灵光一现，用了一个笨办法：直接把整个标签都重写了一遍，把不需要的属性给省略掉。结果提交了代码之后，发现页面里的其他部分也一起变得很诡异。细看代码，发现之前的标签还有其它的一些属性，我没有在新的标签中重新赋值。所以造成的结果是，我把之前的属性数值都给删掉了。所幸最后找出了问题，但那份经历真的是太痛苦了。

后来小编我发现了一种更为高效的解决方式：使用JavaScript。是的，你没看错，JavaScript万能的啊！毕竟这个语言嘛，衍生出来的功能简直多不胜数。

那么话说回来，要如何使用JavaScript删除HTML标签的属性呢？要分为以下步骤去哟：

第一步，先获取到需要修改的HTML元素。

第二步，将这个元素的属性列表取出来，存放到一个数组里面。

第三步，删除数组中的不需要的属性。

第四步，把修改后的属性列表重新赋值回该元素。

以上就是整个步骤啦！让我们来具体分析。

首先是第一步，获取元素，就是使用getElementById方法啦。DOM方法中正在使用的元素的style对象，可以让我们获取所有的CSS属性。如下代码：

```html

Hello World!

```

```javascript

var para = document.getElementById("myP");

```

以上代码我们就获取了一个ID为myP的元素，也就是我们需要修改的元素。紧接着就是第二步，获取该元素的所有属性啦。这个时候，我们需要用到getAttributeNames()方法，如下代码所示：

```javascript

var para = document.getElementById("myP");

var paraAttrs = para.getAttributeNames();

```

那么，我们就已经得到了一个包含了myP元素所有属性名称的数组 paraAttrs。但是，这个时候我们仍然不能一个一个的删除或者修改元素的属性，因为这样会很麻烦（而且代码会很长）。因此，我们需要使用数组的一些方法，进行筛选，删除，添加元素。接下来看看第三步吧！

在第三步中，我们便可以使用JavaScript的数组的方法，把我们需要删除的属性筛选掉，如下代码所示：

```javascript

var undesirableAttr = "style";

paraAttrs = paraAttrs.filter(function(attr){

return attr !== undesirableAttr;

});

```

以上代码，我们采用documen.getElementById方法获取到了我们需要修改的元素，存储到变量para中。然后，我们又采用getAttributeNames()方法获取到了需要修改元素的所有属性，存储到变量paraAttrs中。最后，我们使用filter()方法，将其中我们想要删除的属性名给筛选出去，存储到paraAttrs变量中。

最后呢，我们就要进入最后一步了，也就是将修改后的属性列表重新赋值回该元素。需要使用setAttribute()方法，如下代码所示：

```javascript

var undesirableAttr = "style";

paraAttrs = paraAttrs.filter(function(attr){

return attr !== undesirableAttr;

});

for(var i=0; i var attrName = paraAttrs[i];

var attrValue = para.getAttribute(attrName);

para.setAttribute(attrName, attrValue);

}

```

以上代码，我们使用for循环遍历剩余的属性名称数组，依次从para中取出对应属性的值，并使用setAttribute方法，重新赋值到para元素中。

总结一下这个方法，非常的简单实用。一开始我尝试使用CSS中的属性选择器进行修改，结果还是徒劳无功。但是，一直到我发现JavaScript的强大威力后，我再也没有尝试用CSS来改变HTML元素的属性了。因为这种方式非常的灵活，适合于各种不同类型的元素，而且应用范围非常广泛。所以，有需要修改HTML标签属性的小伙伴们，完全可以试试这个方法。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/