Javascript установить отрицательную маржу

javascript html css

1007 просмотра

1 ответ

Я новичок в 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'

Автор: Ernest Zamelczyk Источник Размещён: 08.11.2019 11:31

Ответы (1)


4 плюса

  1. Установите идентификатор вместо класса в теге div. Вы используете getElementById(). Это именно так. Таким образом, вам нужно предоставить идентификатор, который существует, а не класс. Если вы хотите выбрать элемент по классу. Просто используйте 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>

Существует три основных способа выбора HTML-элементов с помощью JavaScript:

// 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');
Автор: Ivan Размещён: 20.08.2016 03:56
32x32