Question

这里我想模拟Microsoft Word的边距调整样式。也就是说，单独改变边缘的一侧，而另一侧不移动。像这样： enter image description here

我创建了一个“纸张，它用一些内容嵌入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的边框不变。

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

调整像Microsoft Word这样的填充

1 个答案: