一般来说，如果想要对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” 的属性。具体结果如下：
当然此处之所以把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用起来更加简便一些，与上面例子的写的差不多一样，此处就不再做多余的内容添加。
5225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
