如何在瀏覽器調整大小時更改div元素的ID？

<div id="123"></div>

我想要的ID更改爲234，當瀏覽器大小

<div id="234"></div>

我有使用媒體查詢，但我認爲這是不可能的

@media screen and (max-width: 479px) { 

    #123 { 

    } 
}

來源

2016-04-15 uno

改變'id'的目的是什麼？唯一的目的是讓你可以應用不同的CSS樣式？是的，媒體質疑會讓你走上正軌。 – KevBot

林不知道你在做什麼，但這可以是溶膠ved with window.onresize

你通常不應該改變你的元素ID，但如果你想要的話，你需要在onresize函數中使用一些邏輯來推斷你的元素在調整窗口大小時的ID。

來源

2016-04-15 01:40:30

沒有jQuery的答案

window.onresize = function(event) { 
    if(document.getElementById('123') != null)    
    document.getElementById('123').id = '234'; 
};

只是要小心ID 234沒有分配給其他元素，但是你不應該改變你的ID爲多變的款式，因爲它應該通過添加和刪除CSS類來完成。

來源

2016-04-15 01:43:28

您需要檢查'document.getElementById'是否返回任何內容，否則在嘗試分配給'null.id'時會出錯。 – Barmar

更改ID後，下次調整窗口大小時，舊ID將不存在，因此代碼將失敗。 – Barmar

感謝您指出這一點，我將更新我的代碼 –

你說得對！使用CSS是不可能的，但可以使用JavaScript & /或jQuery。試試這個使用jQuery：

$(window).on('resize',function() { 
    $('#123').attr('id','234'); 
});

上面的代碼的問題，是它的一個1X唯一的變化。在第一次調整大小之後，您無法重新定位該ID。所以在瀏覽器檢測到它被調整了2-3個像素後，JS就會中斷。

真正的問題是，爲什麼你想改變一個id在調整大小？最好更改HTML 5 data-*屬性，如：data-id。這使您可以使用#myUniqueId屬性重複更改。然後，只要窗口被調整大小，您的代碼應該繼續運行。

下面是該代碼jsfiddle：

HTML：

<div id="myUniqueId" data-id="123"></div> 
<div id="output"></div>

的jQuery：

$(window).resize(function() { 
    var id = $('#myUniqueId').attr('data-id'); 
    id++; 
    $('#myUniqueId').attr('data-id',id); 
    // Double check: what is my id? 
    var myId = $('#myUniqueId').attr('data-id'); 
    $('#output').html(myId); 
});

來源

2016-04-15 01:43:29 Clomp

我用similiar代碼，以便您可以使用手機不同的CSS或桌面......但它完全激怒了我。

這種方式你使用相同的ID或類。但取決於屏幕尺寸，它會做一些不同的事情。

@media not all and (min-width:999px){ 
    /* Big Screen */ 
    body {background-color:green; } 
    #id { background-color:red} 
} 

@media all and (min-width:1000px) 
{ 
    /* Smaller Screen */ 
    body {background-color:blue; } 
    #id { background-color:grey} 
}

請注意，當您用鼠標手動調整屏幕尺寸時，顏色會發生變化....自動更小的css。

來源

2016-04-15 01:46:32

https://css-tricks.com/ids-cannot-start-with-a-number/ ID不能以數字開頭。 –

HTML 5刪除了該限制。 – Barmar

在該頁面上閱讀日期：2007 – Barmar

您可以使用javascript或jQuery輕鬆完成此操作。這裏有一個用JS編寫的例子。

window.onresize = function(){ 
 
    var div = document.getElementById("aaa"); 
 
    if(div){ 
 
     div.setAttribute("id", "bbb"); 
 
    } 
 
}

#aaa { 
 
    font-size: 10px; 
 
} 
 
#bbb { 
 
    font-size: 10em; 
 
}

<div id="aaa">Resize</div>

來源

2016-04-15 01:50:16

我希望你這一個工作。

//detect window resize 
$(window).resize(function() { 

    //test if window width is below 479 
    $(window).width() < 479 ? small() : big(); 

    //small function is called when window size is smaller than 479 
    function small(){ 
     //edited from $("#id_changer").append("<div id='123'>123</div>"); 
     document.getElementByID('id_changer').innerHTML = "<div id='123'>123</div>"; 
    } 

    //big function is called when window size is bigger than 479 
    function big(){ 
     //edited from $("#id_changer").append("<div id='234'>234</div>"); 
     document.getElementByID('id_changer').innerHTML = "<div id='234'>234</div>"; 
    } 
}); 



<body> 
    <div id="id_changer"></div> 
</body> 
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
<script src="test.js"></script>

來源

2016-04-15 02:01:22

這將創建多個具有相同ID的DIV，因爲它在追加新DIV之前不會刪除舊DIV。 – Barmar

如何在瀏覽器調整大小時更改div元素的ID？

回答

相關問題