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');