Javascript动态更改div宽度
[英]Javascript to change div width dynamically
问题描述
Can anyone help me out to create a javascript? 
谁能帮我创建一个JavaScript吗？
Let me explain, i have 2 divs 让我解释一下，我有2个div
1) left div width 85% 1）左div宽度85％
2) right div width 15% 2）右div宽度15％
so there is what i want to change width for left div. 所以有什么我想改变左div的宽度。 like, if i remove or hide right div, left div width should 100% dynamically with javascrpt. 像，如果我删除或隐藏右div，则左div宽度应使用javascrpt动态100％。
4 个解决方案
解决方案1
3 2015-05-18 15:28:26
I have done it using JavaScript: 我已经用JavaScript完成了：
UPDATED : Demo 3 : Animate slide in/out with CSS transitions. 更新：演示3 ：通过CSS过渡为幻灯片放映动画。
HTML 的HTML
<div class="wrapper">
<span class="div1"></span><span class="div2"></span>
</div>
<button>Remove</button>
CSS : UPDATED CSS：已更新
html, body {
width:100%;
margin:0;
}
.wrapper {
width:100%;
display:inline-block;
height:auto;
float:left;
}
.div1 {
display:inline-block;
width:85%;
height:40px;
background:#333;
}
.div2 {
display:inline-block;
width:15%;
height:40px;
background:green;
}
/*ADDED BELOW LINES*/
.div1, .div2
{
/* Change Seconds(here it's 0.5s) as per your requirement */
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.addRemoveContent
{
width:100%;
}
.addRemoveMenu
{
width:0;
}
JS JS
$("button").click(function () {
$(".div2").hide(10);
$(".div1").css("width", "100%");
});
JS:UPDATED - Bringing right div back JS：UPDATED-将右div返回
$("button").click(function () {
$(".div2").toggleClass("addRemoveMenu");
$(".div1").toggleClass("addRemoveContent");
});
解决方案2
1 2015-05-18 15:34:04
Here is a demo for the CSS solution: http://jsfiddle.net/yf3e5bhv/ 这是CSS解决方案的演示： http : //jsfiddle.net/yf3e5bhv/
The advantage of this approach is that your template is declarative. 这种方法的优点是您的模板是声明性的。 You could make a plain HTML page of each state of your application. 您可以为应用程序的每种状态制作一个普通的HTML页面。 In my opinion this greatly aids development and maintenance. 我认为这极大地有助于开发和维护。
HTML 的HTML
<input type="button" value="toggle" id="button" /><br /><br />
<div id="left"></div><div id="right"></div>
CSS 的CSS
#left, #right {
width: 50%;
background-color: #ff0000;
height: 50px;
float: left;
}
#right {
background-color: #00ff00;
}
body.hide-right #right {
display: none;
}
body.hide-right #left {
width: 100%;
}
JS JS
var state = false;
document.getElementById("button").addEventListener("click", function () {
var classname = "";
if (state === false) {
classname = "hide-right";
}
document.body.className = classname;
state = !state;
});
You can significantly reduce this code if you use a library like jQuery: 如果使用类似jQuery的库，则可以大大减少以下代码：
$("#button").on("click", function () {
$(document.body).toggleClass("hide-right");
});
解决方案3
0 2015-05-18 15:32:40
You can do this using CSS and JavaScript. 您可以使用CSS和JavaScript进行此操作。 Quick and dirty way: 快速而肮脏的方式：
.dynamic {
margin-right: 0;
}
Set your divs to have a margin-right, then use JavaScript to apply this class whenever the div is hidden. 将div设置为具有边距右移，然后在div被隐藏时使用JavaScript来应用此类。
function hideDiv(id, outerdiv) {
document.getElementById(id).style.display = 'none'; //hide the right div
$("#outdiv").addClass("dynamic"); //make the other div fill the space
}
解决方案4
0 2015-05-18 16:08:09
A simple solution without any jQuery bloat. 一个没有jQuery膨胀的简单解决方案。 Works in Chrome, FF, and IE 5-11, etc. 工作在Chrome，FF，以及IE 5-11等
Just apply float and width styles to the right DIV. 只需将浮点和宽度样式应用于正确的DIV。 Click the left DIV to toggle width between 85% and 100%. 单击左侧的DIV可在85％和100％之间切换宽度。
<html> <body> <style type="text/css"> div {height: 10em; border: 1px blue solid; } #right { width: 15%; float: right; background-color: lightgreen; } </style> <div> <div id="right"> </div> <div onclick="toggle()">click me</div> </div> <script type="text/javascript"> function toggle() { var s = document.getElementById('right').style; s.display = s.display ? '' : 'none'; } </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.