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

回答

相关问题