卡卡網(wǎng)

div的id是可以改變的，通常使用的方法是通過(guò)JQuery或Javascript來(lái)實(shí)現(xiàn)。本文介紹用JQuery或JS改變div的id的五種方法。

方法一：使用Tag選擇器

JQuery代碼如下：

<div id="myDivId">測(cè)試</div>
<script type="text/javascript">
$('div').attr('id','myDivId_new');
</script>

Javascript代碼如下：

<div id="myDivId">測(cè)試</div>
<script type="text/javascript">
document.getElementsByTagName("div").id = 'myDivId_new';
</script>

代碼解釋：上面的代碼是把div的id名稱由原來(lái)的“myDivId”改為“myDivId_new”。

注意問(wèn)題：這個(gè)方法有很大的局限性，只當(dāng)網(wǎng)頁(yè)只有一個(gè)div標(biāo)簽時(shí)才正確，而絕大多數(shù)網(wǎng)頁(yè)是不止一個(gè)div標(biāo)簽。

方法二：通過(guò)Class選擇器

JQuery代碼如下：

<div id="myDivId" class="myDivClass">測(cè)試</div>
<script type="text/javascript">
$('.myDivClass').attr('id','myDivId_new');
</script>

代碼解釋：上面的代碼是把class為“myDivClass”的div的id名稱由原來(lái)的“myDivId”改為“myDivId_new”。

注意問(wèn)題：這個(gè)方法也有較大的局限性，只當(dāng)網(wǎng)頁(yè)只有一個(gè)div的class為“myDivClass”時(shí)才正確，而網(wǎng)頁(yè)通常一個(gè)class有多個(gè)div在使用。

方法三：通過(guò)id選擇器（推薦）

JQuery代碼：

<div id="myDivId" class="myDivClass">測(cè)試</div>
<script type="text/javascript">
$('#myDivId').attr('id', 'myDivId_new');
</script>

Javascript代碼：

<div id="myDivId" class="myDivClass">測(cè)試</div>
<script type="text/javascript">
document.getElementById("myDivId").id = 'myDivId_new';
</script>

代碼解釋：上面的代碼是把id為“myDivId”的div的id名稱由原來(lái)的“myDivId”改為“myDivId_new”。

這個(gè)方法最好，因?yàn)樗皇苋魏蜗拗?，即是不受網(wǎng)頁(yè)的div數(shù)量限制，也不管網(wǎng)頁(yè)有多少個(gè)div具有相同的class名稱。

這是推薦大家使用的一個(gè)方法。

方法四：使用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()來(lái)改變div的id，代碼如下：

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

注意： querySelector() 方法僅僅返回匹配指定css選擇器的第一個(gè)元素。例如：

獲取文檔中第一個(gè) <p> 元素：

document.querySelector("p");

獲取文檔中 class="example" 的第一個(gè) <p> 元素：

document.querySelector("p.example");

獲取文檔中有 "target" 屬性的第一個(gè) <a> 元素：

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

所以這個(gè)方法的局限性非常大。這里僅作介紹，但不作推薦使用。

您可能對(duì)以下文章也感興趣

• div層顯示/隱藏的6種常見(jiàn)效果

標(biāo)簽: div