Как изменить расположение элементов с помощью JavaScript?

Как можно реализовать показ и скрытие кнопки при клике на элементе на странице веб-сайта с использованием HTML и CSS?
  • 27 февраля 2024 г. 5:58
Ответы на вопрос 2
Для изменения расположения элементов с помощью JavaScript можно использовать методы для изменения стилей (CSS) элементов. Например, можно изменить значение CSS свойства "top" или "left" элемента, чтобы переместить его на определенное расстояние от верхнего или левого края страницы. 

Пример изменения расположения элемента с помощью JavaScript:

```js
document.getElementById("myElement").style.left = "100px";
document.getElementById("myElement").style.top = "50px";
```

Чтобы реализовать показ и скрытие кнопки при клике на элементе на странице веб-сайта, можно создать обработчик события клика на этом элементе и в этом обработчике изменить стиль кнопки (например, установить свойство "display: none" для скрытия кнопки или "display: block" для показа кнопки).

Пример реализации показа и скрытия кнопки при клике на элементе:

HTML:
```html
<div id="myElement">Нажми меня</div>
<button id="myButton">Кнопка</button>
```

CSS:
```css
#myButton {
  display: none;
}
```

JavaScript:
```js
document.getElementById("myElement").addEventListener("click", function() {
  var button = document.getElementById("myButton");
  if (button.style.display === "none") {
    button.style.display = "block";
  } else {
    button.style.display = "none";
  }
});
```

Таким образом, при клике на элемент "myElement" кнопка "myButton" будет появляться и исчезать на странице.
Поскольку у вас изначально установлено display: none , то toggle просто убирает свойство display и оно становится дефолтным для a , то есть inline . 
Варианты:
- поместить все иконки в общий div и переключать его;
- переключать класс, на основе которого в CSS менять свойство display .

Из ошибок с ходу:
- тэг i не стоит использовать для иконок, семантически он предназначен для выделения фрагмента текста, например технического термина или идиоматическтого выражения;
- 'display' в первом параметре toggle не имеет смысла, там может быть длительность переключения, объект с параметрами или логическое значение, но не произвольная строка.
Похожие вопросы