如何在浏览器调整大小时更改div样式

我正在创建一个脚本，当div因调整大小而比正常大时，它会更改div的样式。如何在浏览器调整大小时更改div样式

我想出了这个，但由于某些原因，有时它说宽度为0，我不能真正弄清楚为什么。另外，当我更改div时必须更改的数量不起作用，并且不会改回。

window.addEventListener('resize', height); 
 

 
function height() { 
 
    var height = document.getElementById('noline').offsetHeight; 
 
    document.getElementById("noline").innerHTML = height; 
 

 
    if (height <= 20) { 
 
    document.getElementById('noline').setAttribute('id', 'line1'); 
 

 
    } else { 
 
    document.getElementById('line1').setAttribute('id', 'noline'); 
 
    } 
 
}

#noline 
 
{ 
 
border: solid 5px blue; 
 
} 
 

 
#line1 
 
{ 
 
border: solid 5px black; 
 
}

<div id="noline"> 
 
</div>

我检查了计算器，但不能真正找到一个容易理解的答案，因为我是新来的JavaScript我真的不知道我做错了什么，所以我想知道我做了什么错误的，如何解决它，为什么会发生。

谢谢！

来源

2017-01-24 SupremeLeader

它工作正常[在这里，点击此链接]（https://jsfiddle.net/6bknsjg3/）。首先运行然后调整显示框的大小。或者我不明白这个问题。 – warkentien2

@ warkentien2但它不会改变id一旦它的改变！ –

当然是！只需打开开发人员的工具并查看HTML。它改变！但是，没有客户端代码会实际改变你的HTML文件。你需要node.js。 – warkentien2

你可以在你的css文件中使用@media规则。

@media (max-width: 720px) { 
    .something{ 
     . 
     . 
     . 
    } 
}

来源

2017-01-24 18:33:55

一个干净的解决办法是使用CSS媒体查询。您首先想知道您想要定位的浏览器的维度。然后做这样的事情

@media (max-width: 600px) { 
    .div1 { 

    } 
} 


@media (max-width: 720px) { 
     .div2 { 

     } 
    }

来源

2017-01-24 18:39:35 user3307291

如何在浏览器调整大小时更改div样式

回答

相关问题