基于类似屏幕的CSS媒体查询更改Javascript属性(HTML中的内联）

Changing Javascript attribute (inline in HTML) based on screenlike CSS Media Queries

本文关键字：HTML 属性 Javascript 屏幕 于类似 CSS 媒体 查询      更新时间：2023-09-26

我正在使用Flexislider2作为响应站点，不确定如何为我遇到的挑战编写代码。我精通HTML和CSS，但不太擅长javascript(目前仍在学习：>(。

该网站在几个断点处使用CSS媒体查询，所有CSS响应都很好(只是提到了fyi(。

然而，flexislider中有一些属性是在HTML中内联设置的(在标记中(，我需要在相同的断点处进行更改。

我需要在特定的屏幕宽度下动态更改itemWidth的值(包括更改时，而不仅仅是加载(，就像css媒体查询一样。

所以我的问题是，当屏幕大小为(或更改为(时，我如何更改该属性的值<960像素和<780像素和<480像素

基本上，我需要在CSS媒体查询命中的同时更改该值，仅供参考：@媒体屏幕和(最大宽度：960px(@媒体屏幕和(最大宽度：780px(@媒体屏幕和(最大宽度：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>

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((的信息。

特别是第二个链接对你要做的事情非常有指导意义。

相关文章：