Javascript動態更改div寬度

-1

任何人都可以幫我創建一個JavaScript？Javascript動態更改div寬度

讓我解釋一下，我有2周的div

1）左格寬度85％
2）右格寬度15％

所以我想改變爲左格的寬度。就像，如果我刪除或隱藏正確的div，留下div寬度應該100％動態與javascrpt。

來源

2015-05-18 HMS Designz

沒有在這裏的代碼，人們沒有找到好回答你的問題。 [創建演示]（http://www.jsfiddle.net） – divy3993

你們也可以看到我想要做什麼http://client-acumenadagency.com/sed/ –

這個div需要全寬，如果其他DIV隱藏

和其他分區是 –

我已經使用JavaScript了這事

WORKING : Demo 1

UPDATED : Demo 2

UPDATED : Demo 3：動畫/與CSS過渡幻燈片。

HTML

<div class="wrapper"> 
<span class="div1"></span><span class="div2"></span> 

</div> 
<button>Remove</button>

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; 
}

$("button").click(function() { 
    $(".div2").hide(10); 
    $(".div1").css("width", "100%"); 

});

個JS：更新 - 瞻右格回

$("button").click(function() { 
    $(".div2").toggleClass("addRemoveMenu"); 
    $(".div1").toggleClass("addRemoveContent"); 

});

來源

2015-05-18 15:28:26 divy3993

你做得不錯，但你可以請點擊按鈕使它更適合我，右側會再次顯示。你能幫我嗎？ –

立即檢查，更新了答案。 – divy3993

如果還有任何問題隨時問！ – divy3993

爲此，您可以使用CSS和JavaScript。快速而骯髒的方式：

.dynamic { 
    margin-right: 0; 
}

設置你的div有一個保證金右，然後使用JavaScript每當DIV是隱藏應用此類。

function hideDiv(id, outerdiv) { 
    document.getElementById(id).style.display = 'none'; //hide the right div 
    $("#outdiv").addClass("dynamic"); //make the other div fill the space 
}

來源

2015-05-18 15:32:40

下面是CSS的解決方案演示：http://jsfiddle.net/yf3e5bhv/

這種方法的好處是，你的模板聲明。您可以爲應用程序的每個狀態創建一個純HTML頁面。在我看來，這大大有助於開發和維護。

HTML

<input type="button" value="toggle" id="button" /><br /><br /> 
<div id="left"></div><div id="right"></div>

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%; 
}

var state = false; 
document.getElementById("button").addEventListener("click", function() { 
    var classname = ""; 
    if (state === false) { 
     classname = "hide-right"; 
    } 
    document.body.className = classname; 
    state = !state; 
});

，如果你使用一個庫如jQuery可以顯著減少這種代碼：

$("#button").on("click", function() { 
    $(document.body).toggleClass("hide-right"); 
});

來源

2015-05-18 15:34:04 Halcyon

你好親愛的@Halcyon，非常感謝幫助我，但有一個問題，像你分開左和50％的權利div，但我需要離開85％，剩下15％所以我怎麼能用你的代碼呢？ –

只需更改CSS中的值即可。 – Halcyon

一個沒有任何jQuery膨脹的簡單解決方案。適用於Chrome，FF和IE 5-11等。

只需將浮點和寬度樣式應用於右側DIV。點擊左邊的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>

來源

2015-05-18 16:08:09 Roberto

Javascript動態更改div寬度

回答

相關問題