用 JS 更改.css?使用变量设置动态.css属性
Alter .css with JS? Setting dynamic .css properties with variables
我有如下所示的内容:
<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是错误的,这是我刚刚正在学习的东西。有没有一种方法可以用来获得我想要的结果?
你可以这样做:
if (leftheight.currentHeight > rightheight.currentHeight) {
rightheight.style.minHeight = leftheight.currentHeight;
} else if (rightheight.currentHeight > leftheight.currentHeight) {
leftheight.style.minHeight = rightheight.currentHeight;
}
这实际上minHeight
不是min-height
.
这里不需要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;
}
示例小提琴
通常,javascript永远不应该仅用于布局目的。如果有人关闭了javascript,你的页面会发生什么?
你可以使用 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")
}
使用 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");
}
});
相关文章:
- 如何使用CSS设置所选选项的样式,而不设置所有其他选项的样式
- 使用CSS设置HTML5自动对焦属性
- 使用jQuery/CSS设置的鼠标光标在鼠标移动之前不会更改
- 在jquery中使用css设置背景大小
- 将所有访问过的网站颜色重置为所有最新浏览器和所有doctype(xhtml,html,html5)的默认颜色css设置
- IE11 style.maxHeight未从css设置
- 使用css设置背景的宽度和高度
- slideDown() 在 css 设置为 display:none 时不起作用
- 通过在运行时使用 CSS 设置其高度/宽度来拉伸 img 会产生奇怪的渐变
- 如何调整从其他用户加载的图像的大小,以便保持尺寸,同时使用 css 设置最大宽度和高度?(HTML/JS/CSS)
- 你能用CSS设置一个断开的链接的样式吗?
- 如何使用 CSS 设置表单样式
- 如何直接从 CSS 设置自定义元素的样式
- CSS-设置固定(或绝对)位置时转换宽度中断
- 为什么我们可以't使用css设置画布的宽度和高度
- 如何在jsviews中将css设置为自定义标记(日期选择器)
- 如何在页面加载前使用CSS设置响应滑块的高度
- 使用CSS设置表格样式
- RaphaelJS/CSS-设置文本/数字动画
- 当javascript事件的大小通过css设置时,我如何在其上放大图像