Question

我正在使用某人做过的网站，而且我在使用javascript时遇到了一些困难。

我正在尝试获取div的当前宽度，而不是CSS中的内容。当我调整窗口大小时，我需要获得新的div宽度（通过jQuery调整大小）。

我正在使用此代码：

if(document.getElementById("header").offsetWidth<1270){
    alert("Cheguei aqui");
}

我认为如果元素宽度低于1270，我会发送警报。但它没有用。

这是标题div。

    <div id="header">
            <div class="container">
      <div class="two columns" id="logo-wrap"> <a href="index.html">
        <div id="logo2"></div>
        </a>
         <select id="header-mobile-menu">
          <option value="index.html">Home</option>
          <option value="Quem Somos.html">Quem Somos</option>
          <option value="Consulta.html">Consultas</option>
          <option value="Exame.html">Exames</option>
          <option value="Terapias.html">Terapias Alternativas</option>
          <option value="AcaoSocial.html">Ação Social</option>
          <option value="Contato.html">Contato </option>
        </select>
      </div>
      <div class="fourteen columns">
        <nav>
          <ul id="menu-header-menu" class="menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="Quem Somos.html">Quem Somos</a></li>
            <li><a href="Consulta.html">Consultas</a></li>
            <li><a href="Exame.html">Exames</a></li>
            <li><a href="Parceiros.html">Parceiros</a></li>
            <li><a href="Contato.html">Contato</a> </li>
          </ul>
        </nav>  
      </div>
<!-- Place this tag where you want the search box to render -->
<div class="searchgoogle"><gcse:searchbox-only></gcse:searchbox-only></div>

      <br class="clear" />
    </div>
<div id="socialdiv">
    <div id="social-button"> 
            <a href="http://www.facebook.com/centralife" target="_blank">
            <div id="facebook-img"></div></a>
            <a href="https://twitter.com/CentralLife1" target="_blank">
            <div id="twitter-img"></div></a>    
        <a href="http://www.orkut.com.br/Main#Profile?uid=9858410708954250541" target="_blank">
            <div id="orkut-img"></div></a>    
            <a href="http://centralifesaude.blogspot.com.br/" target="_blank">
            <div id="blog-img"></div></a>
            <a href="http://www.youtube.com/watch?v=0Uhjl-ykpt8&feature=plcp" target="_blank">
            <div id="youtube-img"></div></a>
           </div>
</div>
</div>

CSS有很多“标题”声明，这很难得到。顺便说一句，这个javascript不会影响我的CSS，是吗？

怎么了？

Answer 1

我不知道，但我的代码运作良好：

$(window).resize(function(){
   if($('#header').width() < 1270){
       alert('teste');
   }
})

Answer 2

因为你显然使用的是jQuery：

$("#header").width()

将返回标题元素的宽度

Answer 3

查看该主题

Total width of element (including padding and border) in jQuery

有一个解释来采用元素宽度和其他属性

Answer 4

要获得精确的Div宽度，可以使用getBoundingClientRect（）并从左侧减去。

使用Javascript检查元素宽度

4 个答案: