html - 使用媒体查询更改值数据属性

Question

我创建了我的网站，但我遇到了一个 div 属性的问题。 我尝试在屏幕较小时更改该值。

我的 CSS 媒体查询:

@media screen and (min-width: 1000px) and (max-width: 2000px) {
#my-content { display: block; }
#my-slider {width: 670px;}

}

@media screen and (min-width: 0px) and (max-width: 1000px) {
#my-content { display: none; }   /* hide it elsewhere */
#my-text {font-size: 26px;}
#my-slider {content: attr(data-x : 700) ;}
}

我的 html:

<div id="my-slider" class="caption sfb" data-x="500" data-y="0" data-speed="900" data-start="900" data-easing="easeOutSine"><img src="code1.jpg" width="670px" height="500px"  alt="" /></div>

我想更改 data-x 但无法处理我发现的所有可能性...你能帮我吗？谢谢。

Answer 1

你最好的猜测是构建一些东西来检查你的浏览器的屏幕尺寸是否已经改变，而不是相应地设置 data 属性:

var resize = function() {
  var screenWidth = parseInt($('body').width()), mySlider = $( "#my-slider" );
  
  if (screenWidth < 1000) {
    mySlider.data('x','foo');
  }
  else if (screenWidth < 2000) {
    mySlider.data('x','bar');
  }
  else {
    mySlider.data('x','foo-bar');
  }
}

$( window ).resize(function() {
  resize();
});

$( document ).ready(function() {
  resize();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div id="my-slider" class="caption sfb" data-x="500" data-y="0" data-speed="900" data-start="900" data-easing="easeOutSine"><img src="code1.jpg" width="670px" height="500px"  alt="" /></div>

但是您必须记住，仅更改数据属性不一定会改变 slider 的行为。首先，您最好让自己拥有一个响应式 slider 。