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

您所在的位置:网站首页 html标签内容 动态修改HTML标签属性的两种方式

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

2023-07-16 03:32| 来源: 网络整理| 查看: 265

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

(一)通过JS代码来动态修改属性: ①第一案例:

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

具体样例代码如下:

test var element = document.getElementById("test"); element.setAttribute("name","test");

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

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

       如果是比较熟练的,可以直接连写:

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

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

test function test(){ var element = document.getElementById("test"); element.setAttribute("name","test"); }

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

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

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

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3