javascript - 调整填充，如 Microsoft Word

Question

这里我想模拟一下微软 Word 的边距调整风格。即单独更改边距的一侧，而另一侧不动。像这样：

我创建了一个“纸”，它嵌套了一个包含一些内容的 div，如下所示：

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

此外，我添加了一个滑块来更改 padding-left 和 padding-right 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不变。

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