使用 Javascript 检查元素宽度答案

【问题标题】：Checking element width with Javascript使用 Javascript 检查元素宽度
【发布时间】：2013-03-01 17:32:38
【问题描述】：

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

怎么了？

【问题讨论】：

我们可以看看 HTML 和 CSS 吗？也许是一个 jsfiddle？
你的 html 中有 id="header" 吗？
小于 1270px 的值会使我的布局崩溃。

标签： javascript jquery html

【解决方案1】：

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

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

【讨论】：

好吧，我说我是 Javascript 新手。忘记事件处理程序。放 $(window).resize(function(){ 就可以了。谢谢，或者 Valeu 哈哈哈
所以，这只有在我调整窗口大小时才有效。如果我从小尺寸开始呢？像智能手机一样？如何在开始时检查我的窗口？
$(function() { //这里检查函数 });

【解决方案2】：

因为您显然在使用 jQuery：

$("#header").width()

将返回页眉元素的宽度

【讨论】：

【解决方案3】：

查看该主题

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

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

【讨论】：

【解决方案4】：

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

【讨论】：