2015-10-14 31 views
2

我有一個JavaScript和CSS一些問題...CSS窗口的高度用JavaScript

的問題是,我想從JavaScript到CSS傳遞值...

更具體地講,我想從JavaScript窗口的高度,以獲得並把它傳遞到像素的CSS高度...

這裏是我的CSS:

.fulframe { 
    position: relative; 
    width: 100%; 
    height: TheValueToPass; 
    overflow: hidden 
} 

是否有任何解決方案?我對JavaScript不熟悉,你可以更詳細地回答你:-)

回答

4

代碼你可以只用CSS來完成這一點衆所周知。

純CSS:

.fulframe { 
    position: relative; 
    width: 100%; 
    height: 100vh; 
    overflow: hidden 
} 

vh是瀏覽器窗口的高度視。舊版本的IE不支持這個功能,所以要小心。儘管如此。

更新10/26/2017:我想補充說,視口高度和寬度現在在大多數主流瀏覽器中都得到廣泛支持,Opera除外。 Can I Use Viewport Units?

+0

非常感謝新途徑解決方案... –

3

你不能直接在CSS代碼中使用Javascript變量!

如果您使用的是JQuery,則有css()函數可以修改元素的樣式。你應該做

$(document).ready(function() { 
      $(".fulframe").css("height", TheValueToPass); 
    }); 

假設TheValueToPass呼籲上述

0

我也從"here"

找到jQuery的答案只是我修改爲我的需求:-)

<script> 

     function jqUpdateSize(){ 
      // Get the dimensions of the viewport 
      var width = $(window).width(); 
      var height = $(window).height(); 

      $('#jqWidth').html(width); 
      $('#jqHeight').html(height); 

      $('.test').css({ position: "relative", 
      width: $(window).width(), 
      height: $(window).height(), 
      overflow:" hidden"}); 

     } 
     $(document).ready(jqUpdateSize); // When the page first loads 
     $(window).resize(jqUpdateSize);  // When the browser changes size 


    </script> 

,然後ü可以調用類的HTML語句:

<div class="test" >heloo 
    <p> 
     <strong>jQuery resize:</strong> 
     <span id="jqWidth"></span>, 
     <span id="jqHeight"></span> 
    </p></div>