調整像Microsoft Word的填充

Question

這裏我想模擬Microsoft Word的頁邊距調整風格。也就是說，單獨更改邊距的一邊，而另一邊不移動。就像這樣：

我創建了一個「文件，並嵌套一個div的一些內容，如：

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

另外，我想補充一個滑塊以更改填充左和padding-權的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; 

     } 
    }    
} 

當兩個滑塊同時賦值時，似乎不太好。你能幫我解決這個問題嗎？

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