0

ここでは、Microsoft Wordの余白調整スタイルをシミュレートします。つまり、マージンの片側を個別に変更し、反対側は動かないということです。このような： ここに画像の説明を入力

「紙」を作成し、次のように、いくつかのコンテンツを含む div をネストします。

<div id="paper">   /*width:740px*/
 <div id="myDiv">  /*width:740px*/
  <p>bla bla bla bla</p>
 </div>
</div>

さらに、のパディング左とパディング右を変更するスライダーを追加しますmyDiv。

<input type="range" class="range"  min="0" max="100" step="1" value="0" onChange="show(1,this)"></div>
<input type="range" class="range"  min="0" max="100" step="1" value="0" onChange="show(2,this)"></div>

これは機能です：

function show(index,obj){            
    var width =740;        
    var size = obj.value;
    var inn = document.getElementById("myDiv");

     for (var i in inn) {
         switch(index)
        {
            case 1:
                inn[i].style.paddingLeft=size+"px";
                width = width-size;
                inn[i].style.width=width+"px";
                break;
            case 2:
                inn[i].style.paddingRight=size+"px";
                inn[i].style.width=width-size+"px";
                width = width-size;
                break;

        }   
    }            
 }

2 つのスライダーに同時に値を割り当てるとうまく動作しないようです。この問題を解決するのを手伝ってくれませんか?

PS: - スイッチを必要とする他の無関係な部分を省略したため、ここでスイッチを使用する必要があります。そして、コードでpadding-left/を使用する理由padding-rightは、内側の div の境界線を変更しないようにしたいからですmyDiv。

4

1 に答える 1

1

を使用していますがdocument.getElementsByClassName("myDiv")、その名前のクラスが div に設定されていないようで、ID のみが設定されています。

これを試して：

function show(index,obj){            
    var width =740;        
    var size = obj.value;
    var inn = document.getElementById("myDiv");

    switch(index)
    {
        case 1:
            inn.style.paddingLeft=size+"px";
            width = width-size;
            inn.style.width=width+"px";
            break;
        case 2:
            inn.style.paddingRight=size+"px";
            inn.style.width=width-size+"px";
            width = width-size;
            break;

    }   
}

パディングを追加した後に「紙」の幅を同じにしたい場合（毎回幅を再計算する必要はありません）、次を使用できます。

#myDiv {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

CSS スタイル ルールで。代わりにこれにつながる場合：

function show(index,obj){            
    var size = obj.value;
    var inn = document.getElementById("myDiv");

    switch(index)
    {
        case 1:
            inn.style.paddingLeft=size+"px";
            break;
        case 2:
            inn.style.paddingRight=size+"px";
            break;
    }   
}
于 2013-06-19T07:51:15.280 に答える