調整瀏覽器大小時如何更改div元素的ID？
[英]How to change id of div element when browser resize?
問題描述
我有這個代碼
<div id="123"></div>
當瀏覽器調整大小時，我想將ID更改為234
<div id="234"></div>
我已經使用媒體查詢，但是我認為這是不可能的
@media screen and (max-width: 479px) {
#123 {
}
}
6 個解決方案
解決方案1
2 2016-04-15 01:50:16
您可以使用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>
解決方案2
1 2016-04-15 01:40:30
我不確定您要做什么，但是可以通過window.onresize解決
通常，您不應該在周圍更改元素ID，但是如果需要，您將需要在onresize函數中使用一些邏輯來推斷在調整窗口大小時元素將擁有的ID。
解決方案3
0 2016-04-15 01:43:28
沒有jQuery答案
window.onresize = function(event) {
if(document.getElementById('123') != null)
document.getElementById('123').id = '234';
};
請注意，ID 234沒有分配給另一個元素，但是您不應更改ID以更改樣式，因為應通過添加和刪除CSS類來完成。
解決方案4
0 2016-04-15 01:43:29
你是對的！ 與CSS無關，但與JavaScript和/或jQuery有關。 使用jQuery嘗試一下：
$(window).on('resize',function() {
$('#123').attr('id','234');
});
上面代碼的問題在於，它只是一個1倍的更改。 首次調整大小后，您永遠無法重新定位該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);
});
解決方案5
0 2016-04-15 01:46:32
我使用類似的代碼，因此您可以在移動設備或台式機上使用不同的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。
解決方案6
0 2016-04-15 02:01:22
希望這個對您有用。
//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>
如何檢測 JS 中 div 元素寬度何時發生變化（不是窗口調整大小）？
[英]How to detect when the div element width change (not window resize) in JS?
當div共享ID時，如何更改另一個元素的特定div懸停樣式
[英]How to change styling of a specific div onhover of another element when divs share an id
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.