亚洲avav天堂av在线网,乱人伦人妻中文字幕

技術(shù)頻道 - html技術(shù)

6種方法改變div的id值（使用JQuery或JS）

作者:admin 時(shí)間:2018-9-28 15:3:22 瀏覽:

div的id是可以動(dòng)態(tài)改變的，我們可以通過JQuery或JS來實(shí)現(xiàn)。

使用JQuery或JS改變div id

使用JQuery改變div id

通過使用JQuery的attr()方法，有三種方式可以實(shí)現(xiàn)改變div的id值。

1）byTagName

$('div').attr('id','id_new');

2）byId

$('#div_id').attr('id','id_new');

3）byClass

$('.div_class').attr('id','id_new');

不過在實(shí)際應(yīng)用中，byId是最保險(xiǎn)的寫法，任何時(shí)候都可以用。而byTagName僅當(dāng)網(wǎng)頁只有一個(gè)div時(shí)可以使用，byClass則不能在網(wǎng)頁里出現(xiàn)多個(gè)div使用同一個(gè)class。

使用JS改變div id

通過使用JS，有兩種方式可以實(shí)現(xiàn)改變div的id值。

1）byTagName

document.getElementsByTagName("div").id = 'id_new';

2）byId

document.getElementById("div_id").id = 'id_new';

不過在實(shí)際應(yīng)用中，byId是最保險(xiǎn)的寫法，任何時(shí)候都可以用。而byTagName僅當(dāng)網(wǎng)頁只有一個(gè)div時(shí)可以使用。

完整范例

1、example-jquery.html

<html>
<head>
<title>使用jQuery改變div id</title>
</html>
<body>
<div id="div_id1"></div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#div_id1).attr('id', 'div_id2');
});
</script>
</body>
</html>

2、example-js.html

<html>
<head>
<title>使用js改變div id</title>
</html>
<body>
<div id="div_id1"></div>
<script>
document.getElementById("div_id1").id = 'div_id2';
</script>
</body>
</html>

不僅僅能改變id

不僅能改變id，也能改變class、鼠標(biāo)事件或其他任何屬性。

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

這里要用到setAttribute方法，這個(gè)也是改變div id的第6種方法。