-1

我正在使用某人做过的网站，并且我在使用 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，是吗？

怎么了？

4

4 回答 4

1

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

$(window).resize(function(){
   if($('#header').width() < 1270){
       alert('teste');
   }
})
于 2013-03-01T17:51:40.867 回答
1

由于您显然在使用 jQuery：

$("#header").width()

将返回标题元素的宽度

于 2013-03-01T17:52:39.650 回答
-1

看到那个话题

jQuery中元素的总宽度（包括填充和边框）

有一个解释来获取元素宽度和其他属性

于 2013-03-01T17:39:47.940 回答
-1

要获得精确的 Div 宽度，可以使用 getBoundingClientRect() 并从 Left 中减去 Right。

于 2013-03-01T17:54:41.483 回答