当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Alter .css with JS? Setting dynamic .css properties with variables

问题描述:

I have something like the below:

<div id="left">

left

</div>

<div id="right">

right

</div>

With .css properties:

#left {

width: 60%;

float: left

min-height: ###

max-height: 1000px;

}

#right {

width: 40%;

float: right;

min-height: ###

max-height: 1000px;

}

Notice the ### for both <div> CSS min-height properties. I'd like something like the below (some pseudo 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;

}

Basically I want:

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

My Javascript is wrong, and it's something I'm learning just now. Is there a method I can use to get my desired results?

网友答案:

There is no need for javascript here, you can achieve this by adding a container with overflow: hidden and adding positive and negative margins to the left and 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

As a rule, javascript should never be used solely for layout purposes. What would happen to your page if someone has javascript turned off?

网友答案:

You can do this:

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

It's actually minHeight not min-height.

网友答案:

you can use 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")
}
网友答案:

using 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");
   } 
 });
分享给朋友:
您可能感兴趣的文章:
随机阅读: