用JQuery或JS改变div的id的五种方法

2021-03-06 12:30

阅读：661

标签：doc 解释 tar 其他 set jquery代码获取 class cond

div的id是可以改变的，通常使用的方法是通过JQuery或Javascript来实现。本文介绍用JQuery或JS改变div的id的五种方法。

方法一：使用Tag选择器

JQuery代码如下：

测试
$(‘div‘).attr(‘id‘,‘myDivId_new‘);

Javascript代码如下：

测试
document.getElementsByTagName("div").id = ‘myDivId_new‘;

代码解释：上面的代码是把div的id名称由原来的“myDivId”改为“myDivId_new”。

注意问题：这个方法有很大的局限性，只当网页只有一个div标签时才正确，而绝大多数网页是不止一个div标签。

方法二：通过Class选择器

JQuery代码如下：

测试
$(‘.myDivClass‘).attr(‘id‘,‘myDivId_new‘);

代码解释：上面的代码是把class为“myDivClass”的div的id名称由原来的“myDivId”改为“myDivId_new”。

注意问题：这个方法也有较大的局限性，只当网页只有一个div的class为“myDivClass”时才正确，而网页通常一个class有多个div在使用。

方法三：通过id选择器（推荐）

JQuery代码：

测试
$(‘#myDivId‘).attr(‘id‘, ‘myDivId_new‘);

Javascript代码：

测试
document.getElementById("myDivId").id = ‘myDivId_new‘;

代码解释：上面的代码是把id为“myDivId”的div的id名称由原来的“myDivId”改为“myDivId_new”。

这个方法最好，因为它不受任何限制，即是不受网页的div数量限制，也不管网页有多少个div具有相同的class名称。

这是推荐大家使用的一个方法。

方法四：使用setAttribute

不单单是id，我们还可以改变div的class，或更多事件，或其他属性。

document.getElementById(‘demo‘).setAttribute(‘id‘,‘demoSecond‘);
document.getElementById(‘demo‘).setAttribute(‘class‘,‘new‘);
document.getElementById(‘demo‘).setAttribute(‘onclick‘,‘doThis();‘);

这里要用到setAttribute。

方法五：使用querySelector

还可以用querySelector()来改变div的id，代码如下：

document.querySelector("#divId").id = "newId";

注意： querySelector() 方法仅仅返回匹配指定css选择器的第一个元素。例如：

获取文档中第一个

元素：

document.querySelector("p");

获取文档中 class="example" 的第一个

元素：

document.querySelector("p.example");

获取文档中有 "target" 属性的第一个元素：

document.querySelector("a[target]");

所以这个方法的局限性非常大。这里仅作介绍，但不作推荐使用。

用JQuery或JS改变div的id的五种方法

标签：doc 解释 tar 其他 set jquery代码获取 class cond

原文地址：https://www.cnblogs.com/ljs-13/p/12896616.html

上一篇：js 获取file控件选中图片的宽高

下一篇：记一次学习kibaba踩过的坑(Windows环境)

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：用JQuery或JS改变div的id的五种方法
文章链接：http://soscw.com/index.php/essay/60868.html

亲，登录后才可以留言！

用JQuery或JS改变div的id的五种方法

方法一：使用Tag选择器

方法二：通过Class选择器

方法三：通过id选择器（推荐）

方法四：使用setAttribute

方法五：使用querySelector

评论

热门文章

推荐文章

最新文章

置顶文章