根據屏幕大小更改Javascript屬性（HTML中的內聯），例如CSS Media Queries

Question

我將Flexislider2用於響應性網站，不確定如何編寫代碼以應對挑戰。 我精通HTML和CSS，但是不是很擅長javascript（但仍在學習：>）。

該站點在幾個斷點處利用CSS媒體查詢，並且所有CSS響應能力都很好（為方便起見，僅提及）。

但是，flexislider中有一些屬性是在HTML（標記內）內聯設置的，我需要在相同的斷點處進行更改。

我需要以css Media Queries加入的相同方式，在某些屏幕寬度（包括更改時，不僅是加載時）動態更改itemWidth的值。

所以我的問題是，當屏幕尺寸為（或更改）為<= 960px和<= 780px和<= 480px時，如何更改該屬性的值

基本上，我需要在我的CSS媒體查詢命中的同時更改該值，僅供參考：@media屏幕和（最大寬度：960px）@media屏幕和（最大寬度：780px）@media屏幕和（最大寬度：480px）

這是當前與HTML文檔內聯的javascript。

<script type="text/javascript">
    $(window).load(function(){ 
      $('#testimonial_carousel').flexslider({
             animation: "slide",
             animationLoop: false,
             slideshow: false,
             randomize: false,
             itemWidth: 472,
             itemMargin: 0,
             start: function(slider){
               $('body').removeClass('loading');
             }
      });
    });
  </script>

Answer 1

window.resize(function(){
    if(screen.width <= 480){
        //do something
    }else if (screen.width <= 780){
        //do something else
    }else if(screen.width <= 960){
        //do final thing
    }
})

您可以在resize（）和screen.width（）上找到有關這些聲音的更多信息。

第二個鏈接對您嘗試做的事情特別有啟發性。