-1

私は誰かが行ったウェブサイトで作業していますが、JavaScriptで問題が発生しています。

CSSにあるものではなく、divの現在の幅を取得しようとしています。ウィンドウのサイズを変更するときは、新しい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

あなたは明らかにjQueryを使用しているので：

$("#header").width()

ヘッダー要素の幅を返します

于 2013-03-01T17:52:39.650 に答える
1

わかりませんが、私のコードはうまく機能しています:

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

正確な Div 幅を取得するには、getBoundingClientRect() を使用して、左から右を減算します。

于 2013-03-01T17:54:41.483 に答える
-1

そのトピックを参照してください

jQuery の要素の合計幅 (パディングとボーダーを含む)

要素の幅などの属性を取る説明があります

于 2013-03-01T17:39:47.940 に答える