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

在div标签中设置id而不是类。您正在使用getElementById()。它正是如此。所以你需要提供一个存在的id，而不是一个类。如果要按类选择元素。只需使用getElementsByClass()（将返回包含该类的所有元素的对象。
您需要另一个包装才能应用保证金。不确定这是否是您正在寻找的......

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用JavaScript选择HTML元素有三种基本方法：

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

Javascript设置负边距

1 个答案: