使用jQuery达到某个高度时更改div类？_JavaScript

我有一个div类，如果页面中的一个或多个div类达到某个高度，我想更改它。 这就是我的工作。

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

当.cube中的内容使其增长到一定的高度和更高的高度（例如min-height），比如600px或更高时，我希望代码适合所有适合critera的div类

.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不太有经验，但是我已经进行了几次修改，并且在非常基本的功能上也取得了一些成功。 任何帮助或指导表示赞赏。

这是

要在页面加载时更改元素，只需在页面加载时为它们执行jQuery每个功能即可。 代码如下：

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

而且，为简便.cube.large ，我在您的CSS中添加了一个.cube.large类，其中包含针对较大尺寸的CSS修改的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： ://jsfiddle.net/76g2sLto/2/额外信息：使用jQuery调整大小功能不起作用，因为它仅适用于window对象。 请参阅。

只需获取dom元素并通过使用来更改其类，并将所有样式放入该类中，以便当它更改时将适合它。

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

使用jQuery达到某个高度时更改div类？

问题描述

1楼

2楼