Question

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

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

当.cube中的内容使其增长到某个高度和更高（如最小高度），比如600px和更高时，我希望代码成为适合任何适合的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

Answer 1

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

public function new()
{
    $this->load->view('posts/new');
}

而且，为了方便起见，我在CSS中添加了一个$(window).load(function() { $('.cube').each(function() { if($(this).height() > 600){ $(this).addClass('large'); } }); });类，其中包含针对较大尺寸的CSS的修改后的CSS。所以，你的CSS现在看起来像这样：

.cube.large

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

Answer 2

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

{{1}}

当使用jquery变为某个高度时更改div类？

2 个答案: