载入JavaScript有时无法执行

Question

我的JavaScript遇到了问题。 有时，代码根本不执行，我无法将其归类为特定的事物，例如引发错误并暂停代码或类似内容。 我打算做的是根据设备的分辨率更改图片（徽标）。

  function logo_change() { if ( document.body.clientWidth < 390 ) { document.getElementById('logo').style.display = 'none'; document.getElementById('logo-m').style.display = 'block'; } else { document.getElementById('logo-m').style.display = 'none'; document.getElementById('logo').style.display = 'block'; } } window.onresize = function() { logo_change(); }; window.onload = function() { logo_change(); }; 

 #logo { max-width: 20%; min-width: 185px; float: left; margin-top: 17px; } #logo-m { width: 50px; float: left; margin-top: 17px; display: none; } 

 <a id='logo-l' class="logo-l" href="index.php"> <img src="https://d1afx9quaogywf.cloudfront.net/sites/default/files/Logos/facebook-logo_0.png" id='logo' class="logo" name="logo" height="60"></img> <img src="https://www.ricksdailytips.com/wp-content/uploads/2016/08/f.png" id='logo-m' class="logo-m" height="50"></img> </a> 

我尝试使用与媒体查询基本相同的方法（使用display block和none）来做到这一点，但是链接会崩溃等等。

另外，如果我调整页面大小，代码将执行并且徽标也会更改。 因此，我的事情是window.onload事情。

感谢您的回复。

Answer 1

为此，请使用CSS媒体查询：

#logo, #logo-m {
  display: none;
  /* other common properties */
}
@media screen and (max-width: 389px) {
  #logo-m { display: block; }
}
@media screen and (min-width: 390px) {
  #logo { display: block; }
}