调整浏览器大小时如何更改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.