Question

我有这段代码

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

我希望在浏览器调整大小时将ID更改为234

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

我使用媒体查询，但我认为这是不可能的

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

    #123 {

    }
}

Answer 1

您可以使用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>

Answer 2

我不确定你要做什么，但这可以通过window.onresize

来解决

您通常不应该更改元素ID，但如果您愿意，您需要在onresize函数中使用一些逻辑来推断当您调整窗口大小时元素将具有哪个ID。

Answer 3

没有jQuery回答

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

请注意，234未分配给其他元素，但是您不应该更改您的ID以更改样式，因为它应该通过添加和删除css类来完成。

Answer 4

你是对的！它不可能与CSS一起使用，但可以使用JavaScript＆amp; /或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);
});

Answer 5

我使用类似的代码，因此您可以使用不同的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。

Answer 6

我希望这个适合你。

//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>

浏览器调整大小时如何更改div元素的id？

6 个答案: