0

2人の子供がいるdivを持つことができるので、1つは表示されず（表示：なし）、もう1つは父親のスペース全体を占めますが、JavaScriptに非表示を表示するように指示すると、他の自動再ディメンションは使用せずに残っ​​たスペースに表示されますjavascript？

html：

<div class="parent">
    <div class="child1" id="id1">
    </div>
    <div class="child2">
    </div>
</div>

css：

.parent {
    height: 200px;
    background-color: red; 
}
.child2 {
    height: 100%;
    background-color: blue;
}
.child1 {
    display:none;
    height: 50px;
    background-color: green;
}

javascript：

var myDiv = document.getElementById('id1');
myDiv.style.display="block";
4

1 に答える 1

2

これは純粋なCSSでは実現できませんが、（クラス名を追加するために）JavaScriptをもう少し追加しても問題がない場合は、次のように実現できます。

修正されたJavaScript：

var myDiv = document.getElementById('id1');
myDiv.style.display = "block";
myDiv.className += ' nowShown';

追加されたCSS：

.child1.nowShown {
    float: left;
    width: 50%;
}

.child1.nowShown + .child2​ {
    display: inline-block;
    width: 50%;
}​

JSFiddleの概念実証。

そうでなければ、CSSがdisplay要素の視覚的/状態を決定する能力を欠いているという理由だけで、それは不可能です。疑似クラスがあれば:visible可能ですが、現在のように疑似クラスがなければ、残念ながらそうではありません。

上記の概念実証を適応させて、少し簡潔ではないトグルを実装しました。

function showDiv1() {
    var myDiv = document.getElementById('id1'),
        cN = myDiv.className;
    myDiv.style.display = "block";

    if (cN.match(/nowShown/)){
        myDiv.className = cN.replace(/nowShown/,'');
        myDiv.style.display = 'none';
    }
    else {
        myDiv.className += ' nowShown';
    }
    nC = myDiv.className;
    myDiv.className = nC.replace(/\s{2,}/,' ');
}

document.getElementsByTagName('button')[0].onclick = function(){
    showDiv1();
};​

JSフィドルデモ。

于 2012-05-23T18:00:02.503 に答える