动态修改HTML标签属性的两种方式

缺乏、安全感 2021-09-23 14:28 737阅读 0赞

一般来说，如果想要对HTML标签的属性进行动态修改，基本上都是通过JS的触发事件来实现的，这也就涉及到有关JS代码的编写，当然，其中也有两种编写方式：JS和JQuery，下面我来进行详细的案例分析一下：

（一）通过JS代码来动态修改属性：  
**①第一案例：**

//首先获取对应标签的对象
    var element = document.getElementById("需要修改的标签id值");
    //然后对该标签的属性进行设值,使用setAttribute("","")方法来实现，第一个参数是指属性值，
    //第二个参数指具体修改的值，如果标签原先有这个属性，则直接替换原来的值，否则重新添加一个新的属性给对应的标签
    element.setAttribute("属性名","具体修改的值");

具体样例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
      <meta charset="UTF-8">
      <title>test</title>
    </head> 
    <body>
    <div id="test"></div>
    </body>
    </html>
    <script type="text/javascript">
    		var element = document.getElementById("test");
    		element.setAttribute("name","test");
    </script>

此时通过浏览器的控制台可以看到div标签多了一个**name=“test”** 的属性。具体结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1Z3VveGluZzEyMw_size_16_color_FFFFFF_t_70]  
       当然此处之所以把JS部分放在最后，跟**html代码的加载顺序**有关，因为代码的加载都是**从上往下**执行的，如果我把代码放在头部标签处，会在浏览器控制台中提示错误，找不到该标签的属性。  
       如果要删除该属性值，可以执行一下代码即可：

var element = document.getElementById("需要修改的标签id值");
    element.removeAttribute("属性名");

如果是比较熟练的，可以直接连写：

//不需要再定义多一个变量
    document.getElementById("需要修改的标签id值").removeAttribute("属性名");

**②第二个案例：**  
       如果要更换为触发事件来处理，可以把JS代码的定义放在头标签中，以点击事件为例子，具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
      <meta charset="UTF-8">
      <title>test</title>
      <script type="text/javascript">
      		function test(){ 
    			var element = document.getElementById("test");
    			element.setAttribute("name","test");
    		}
    		</script>
    </head> 
    <body>
    <input id="test" type="button" onClick="test();" value="测试">
    </body>
    </html>

此时再放在前面也不会出错，因为test()函数是当按钮被点击的时候才会被触发并且去执行，此时整个页面的代码都已经加载完成。

（二）通过JQuery来动态修改属性：  
       在使用JQuery之前，我们需要引入JQuery相关的js文件才行，具体怎么去引入此处就不做解释，有需要的读者可以在评论区下留言，笔者再一一回复。  
具体格式：

//获取id为test的标签对象并且设置它的属性值
    $("#test").attr("name","test");
    //获取class为test的标签对象并且设置它的属性值
    $(".test").attr("name","test");

案例代码与JS差不多，只不过JQuery用起来更加简便一些，与上面例子的写的差不多一样，此处就不再做多余的内容添加。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1Z3VveGluZzEyMw_size_16_color_FFFFFF_t_70]: /images/20210923/9b520fcf5e524c7684bb4a35ea420c14.png