卡卡網(wǎng)

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

方法一：使用Tag選擇器

JQuery代碼如下：

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

Javascript代碼如下：

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

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

注意問題：這個方法有很大的局限性，只當網(wǎng)頁只有一個div標簽時才正確，而絕大多數(shù)網(wǎng)頁是不止一個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”。

注意問題：這個方法也有較大的局限性，只當網(wǎng)頁只有一個div的class為“myDivClass”時才正確，而網(wǎng)頁通常一個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”。

這個方法最好，因為它不受任何限制，即是不受網(wǎng)頁的div數(shù)量限制，也不管網(wǎng)頁有多少個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選擇器的第一個元素。例如：

獲取文檔中第一個 <p> 元素：

document.querySelector("p");

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

document.querySelector("p.example");

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

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

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

您可能對以下文章也感興趣

• div層顯示/隱藏的6種常見效果

標簽: div