用 JS 改变 .css？使用变量设置动态 .css 属性答案

【问题标题】：Alter .css with JS? Setting dynamic .css properties with variables用 JS 改变 .css？使用变量设置动态 .css 属性
【发布时间】：2013-11-02 22:15:01
【问题描述】：

我有类似下面的内容：

<div id="left">
    left
</div>
<div id="right">
    right
</div>

带有 .css 属性：

#left {
    width: 60%;
    float: left
    min-height: ###
    max-height: 1000px;
}
#right {
    width: 40%;
    float: right;
    min-height: ###
    max-height: 1000px;
}

注意### 的<div> CSS min-height 属性。我想要类似下面的东西（一些伪 JS）：

var leftheight = document.getElementById(left);
var rightheight = document.getElementById(right);
if (leftheight.currentHeight > rightheight.currentHeight) {
    rightheight.style.min-height = leftheight.currentHeight;
} else if (rightheight.currentHeight > leftheight.currentHeight) {
    leftheight.style.min-height = rightheight.currentHeight;
}

基本上我想要：

if (current height of left > current height of right) {
    min-height of right = current height of left
} else if (current height of right > current height of left) {
    min-height of left = current height of right
} 
//ie. both left and right have the same min-heights, whichever is larger

我的 Javascript 是错误的，这是我刚刚学习的东西。有什么方法可以让我得到我想要的结果吗？

【问题讨论】：

HTML/CSS: Making two floating divs the same height的可能重复
@RoryMcCrossan，我之前看过这个问题，共识似乎是使用填充/边距解决方案，我认为它缺乏技巧并且是一个“便宜的出路”；我希望用 JS 或 jQuery 来解决它。
正如我在回答中所说，CSS 正是应该用于布局。 Javascript 应该永远用于那个。/

标签： javascript jquery css

【解决方案1】：

你可以这样做：

if (leftheight.currentHeight > rightheight.currentHeight) {
    rightheight.style.minHeight = leftheight.currentHeight;
} else if (rightheight.currentHeight > leftheight.currentHeight) {
    leftheight.style.minHeight = rightheight.currentHeight;
}

实际上是minHeight 而不是min-height。

【讨论】：

【解决方案2】：

这里不需要javascript，你可以通过添加一个带有overflow: hidden的容器并在left和right divs中添加正负边距来实现：

<div id="container">
    <div id="left">left</div>
    <div id="right">right<br /><br /><br /><br />Foobar</div>
</div>

#container {
    width: 75%; /* amend this as required */
    overflow: hidden;
}
#left {
    width: 60%;
    float: left;
    max-height: 1000px;
    background-color: #C00;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}
#right {
    width: 40%;
    float: right;
    max-height: 1000px;
    background-color: #0C0;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

Example fiddle

作为一项规则，javascript 决不能仅用于布局目的。如果有人关闭了 javascript，您的页面会发生什么情况？

【讨论】：

我以前遇到过这个（填充和边距愚蠢），它对我不起作用。我不仅没有得到我想要的结果，而且我的页面被扩展了 1000 像素，从而产生了大量的空白。如果重要的话，我正在使用box-sizing: border-box;。
在这种情况下，您还没有将overflow: hidden 应用于您的包含 div。它也适用于border-box：jsfiddle.net/FG4JM/2
你是对的。我已将此标记为答案，因为尽管它缺乏技巧，但它可以完成工作。 jQuery 的答案也很好，但我发现调整页面大小会破坏它（它会产生间隙，但会在页面加载时正常化）。为帮助干杯。
@riista 没问题，很乐意提供帮助。
您可以，但您需要将它们设置为 %，因为这就是宽度所使用的：jsfiddle.net/FG4JM/3。或者在左/右 div 中放置 100% 宽度的容器，然后在它们上放置边距/填充。

【解决方案3】：

你可以使用jquery

var leftheight = $('#left').height();
var rightheight =$('#right').height();


if (leftheight > rightheight) {
    $('#right').css('min-height',leftheight+"px")
 } 
else if (rightheight > leftheight) {
    $('#left').css('min-height',rightheight + "px")
}

【讨论】：

【解决方案4】：

使用 jquery

 $(function(){ //ready function to make sure document is ready
 var $leftdiv=$('#left'),
     $rightdiv=$('#right'),
     $leftHeight=$('#left').height(),
     $rightHeight=$('#right').height();
   if ( $leftHeight > $rightHeight) {
      $rightdiv.css('min-height':$leftHeight + "px");
   } else if ( $rightHeight > $leftHeight) {
      $leftdiv.css('min-height':$rightHeight + "px");
   } 
 });

【讨论】：

一个问题：我正在学习 .js 和 jQuery。这需要在函数/方法中，还是可以像这样“松散”？
它必须在 document.ready 函数中，以确保在调用 if 条件之前加载左右 div 元素。