变divclass当它变成一定高度时使用jquery？

Question

我有一个 div class，如果页面中的一个或多个 div class 达到特定高度，我想更改它。这是我正在处理的内容。

.cube {transform: perspective( 1000px ) rotateX( 25deg ) rotateY( 40deg ) rotateZ( -20deg );
-webkit-transform: perspective( 1000px ) rotateX( 25deg ) rotateY( 40deg ) rotateZ( -20deg );}

当 .cube 中的内容使其增长到一定高度或更高（如最小高度）时，比如 600px 或更高，我希望任何 div class符合条件的元素

.cube {transform: perspective( 1000px ) rotateX( 0deg ) rotateY( 10deg ) rotateZ( 0deg );
-webkit-transform: perspective( 1000px ) rotateX( 0deg ) rotateY( 10deg ) rotateZ( 0deg );}

我使用这个脚本只是为了测试看看是否有任何改变，但它对我不起作用

<script type="text/javascript">
  $('.cube').resize(function() {
  if($(this).height() > 600){ $(this).css('-webkit-transform','none'); }  });
});
</script>

我对 javascript 或 jquery 不是很有经验，但我已经对它进行了几次修改，并且在非常基本的功能上取得了一些成功。感谢任何帮助或指导。

这是jsfiddle

Answer 1

只需获取 dom 元素并通过 using 更改其 class 并将所有样式放入 class 中，以便在更改时适应它。

document.getElementById(your id).className = classname # class name you want

Answer 2

要在页面加载时更改元素，您只需在页面加载时为它们执行 jQuery 每个函数。代码如下所示：

$(window).load(function() {
$('.cube').each(function() {
      if($(this).height() > 600){ $(this).addClass('large'); }  });
});

而且，为了方便起见，我在您的 CSS 中添加了一个 .cube.large class，其中包含您为较大尺寸的修改后的 CSS。所以，您的 CSS 现在看起来像这样：

.cube {transform: perspective( 1000px ) rotateX( 25deg ) rotateY( 40deg ) rotateZ( -20deg );
    -webkit-transform: perspective( 1000px ) rotateX( 25deg ) rotateY( 40deg ) rotateZ( -20deg );}
.cube.large {transform: perspective( 1000px ) rotateX( 0deg ) rotateY( 10deg ) rotateZ( 0deg );
    -webkit-transform: perspective( 1000px ) rotateX( 0deg ) rotateY( 10deg ) rotateZ( 0deg );}

这是一个 jsFiddle：https://jsfiddle.net/76g2sLto/2/ 额外信息：使用 resize jQuery 函数不起作用，因为它仅适用于 window 对象。参见 http://api.jquery.com/resize/。

变divclass当它变成一定高度时使用jquery？

Change div class when it becomes a certain height using jquery?

html

javascript

css

jquery

css-transforms