公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

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

div的id是可以改变的,通常使用的方法是通过JQuery或Javascript来实现。本文介绍用JQuery或JS改变div的id的几种方法。希望有所帮助

方法一:使用Tag选择器

JQuery代码如下:

<div id="myDivId">测试</div>

<script>
    $('div').attr('id','myDivId_new');
</script>

Javascript代码如下:

<div id="myDivId">测试</div>

<script>
document.getElementsByTagName("div").id = 'myDivId_new';
</script>

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

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

方法二:通过Class选择器

JQuery代码如下:

<div id="myDivId" class="myDivClass">测试</div>

<script type="text/javascript">
$('.myDivClass').attr('id','myDivId_new');
</script>

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

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

方法三:通过id选择器(推荐)

JQuery代码:

<div id="myDivId" class="myDivClass">测试</div>

<script type="text/javascript">
$('#myDivId').attr('id', 'myDivId_new');
</script>

Javascript代码:

<div id="myDivId" class="myDivClass">测试</div>

<script type="text/javascript">
document.getElementById("myDivId").id = 'myDivId_new';
</script>

代码解释:上面的代码是把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();'); 
关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)