使用jquery更改div类当它变成一定高度时？答案

【问题标题】：Change div class when it becomes a certain height using jquery?使用jquery更改div类当它变成一定高度时？
【发布时间】：2015-08-08 08:53:44
【问题描述】：

如果页面中的一个或多个 div 类达到特定高度，我想更改一个 div 类。这就是我正在使用的。

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

当 .cube 中的内容使其增长到某个高度或更高（如最小高度）时，例如 600 像素或更高，我希望代码成为适合任何 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 不是很有经验，但我已经对它进行了几次修改，并且在非常基本的功能方面取得了一些成功。感谢您提供任何帮助或指导。

这是jsfiddle

【问题讨论】：

div的内容会动态变化吗？还是您只需要在页面加载时检测到这一点？
没有。我只需要在页面加载时检测到这一点。感谢您的提问！

标签： javascript jquery html css css-transforms

【解决方案1】：

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

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

而且，为了方便起见，我在您的 CSS 中添加了一个 .cube.large 类，其中包含您为更大尺寸的修改过的 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 函数不起作用，因为它仅适用于窗口对象。见http://api.jquery.com/resize/。

【讨论】：

【解决方案2】：

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

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

【讨论】：