Javascript set negative margin

Question

我是新來的Javascript和我從頭開始建立一個網站用於學習的目的。我偶然發現我認爲是一個錯誤。我試圖在我的一個元素上設置負邊距，但它不起作用。這是不適合我的線：

document.getElementById("wrapper").style.marginLeft="-250px"; 

如何在JavaScript中設置我的元素的負邊距？ 這裏是我的html：

<div class="wrapper"> 
    <div class="wrapper_inside"> 
     <img src="images/profile.png"> 
     <ul> 
      <li> 
       <a href="#">Home</a> 
      </li> 
      <li> 
       <a href="#about">About</a> 
      </li> 
      <li> 
       <a href="#portfolio">Portfolio</a> 
      </li> 
      <li> 
       <a href="#contact">Contact</a> 
      </li> 
     </ul> 
    </div> 
</div> 

這是我的CSS：

.wrapper { 
    height: 100%; 
    width: 250px; 
    position: fixed; 
    top: 0; 
    left: 0; 
    overflow-x: hidden; 
    color: white; 
    background-color: #565656; 
    text-align: center; 
    transition: 0.5s; 
} 

----------- -------------編輯 好吧，所以問題在我的JavaScript，但更早。我有切換功能，而不是$element.style.marginLeft=='0px'我做過$element.style.marginLeft=='0'

Answer 1

1°/在div標籤中設置一個id而不是class。您正在使用getElementById()。它確實如此。所以你需要提供一個存在的id，而不是一個類。如果你想按類選擇一個元素。只要使用getElementsByClass()（會返回一個包含類的所有元素的對象。

2°/你需要另一個包裝，以應用的空白。不知道這是你在找什麼？

document.getElementById("wrapper").style.marginLeft = "-250px";

.wrapper { 
 
    height: 100%; 
 
    width: 250px; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    overflow-x: hidden; 
 
    color: white; 
 
    background-color: #565656; 
 
    text-align: center; 
 
    transition: 0.5s; 
 
} 
 

 
.big-wrapper { 
 
    width: 250px; 
 
    margin: auto; 
 
}

<div class="big-wrapper"> 
 
    <div id="wrapper"> 
 
    <div class="wrapper_inside"> 
 
     <img src="images/profile.png"> 
 
     <ul> 
 
     <li> 
 
      <a href="#">Home</a> 
 
     </li> 
 
     <li> 
 
      <a href="#about">About</a> 
 
     </li> 
 
     <li> 
 
      <a href="#portfolio">Portfolio</a> 
 
     </li> 
 
     <li> 
 
      <a href="#contact">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

三種基本方式在JS選擇：

// by id 
document.getElementById('myId'); 

// by class considering your element is the first in DOM to use this class 
document.getElementsByClassName('myClass')[0]; 

// by selector 
document.querySelectorAll('.myClass')[0]; 
// or 
document.querySelector('#myId');