Как заменить цифровое значение стиля в java script?

Question

[Дима Клепко]

let body = document.querySelector('body', 'body.background')
let div = document.querySelector('div' , 'div.opacity')

div.onclick = function(){
	body.style.background = 'red'
	div.opacity = '0'
}

При нажатии блок не пропадает, почему????

Answer 1

[Сергей Соколов]

Нет у div свойства opacity. Просто добавьте немного стиля ; )

И у метода querySelector() нет второго аргумента.

подсказка

на этой странице в консоли выполните

document.querySelector('code.javascript').style.opacity = 0.5;

и ваш код станет наполовину прозрачным

Comments

[Дима Клепко]

Ну я в css ставлю диву opacity: 0; и картинка пропадает, я уже поставил вместо дива картинку, тоже не работает. А чтобы поставить несколько стилей нужно написать querySelectorAll() ?

[Сергей Соколов]

Дима Клепко, нене, всё проще. querySelector'ом выбирается Элемент. А уже у элемента есть всякие свойства, которые можно менять. opacuty – это свойство не самого элемента, а его коллекции style.
Добавить стиля, я имел в виду в div.opacity вставить style: вот так должно быть div.style.opacity

[Дима Клепко]

Стоп, я просто добавил style.opacity вместо opacity, и все заработало! Спасибо огромное! )

[Дима Клепко]

Сергей Соколов, А можно как то совсем удалить картинку? А то у меня при нажатии на картинку с opacity 0, все ровно выполняется код при нажатии на эту картинку

[FrelFrloich]

Дима Клепко, что бы было совсем ясно, в js не как в jquery где вы можете писать стили в строку не парясь.
В js каждый стиль начинается таким способом как вам подсказал Дмитрий.

[FrelFrloich]

Дима Клепко, вы бы лучше загрузили код на https://codepen.io/ или аналог и показали, что вы хотите и что у вас есть.

[SagePtr]

Дима Клепко, чтобы скрыть со страницы - назначить стиль display = 'none'.
А чтобы выбросить из дерева DOM - вызвать у элемента метод remove.

[Сергей Соколов]

Дима Клепко, можно так:
div.style.display = 'none';
Чтобы потом, позже, снова показать:div.style.display = 'block';

Answer 2

[Владимир Ясанкин]

filter:
свойство таблицы стилей (тег STYLE), или свойство стиля внутри тега ( атрибут STYLE). Задает или возвращает набор всех фильтров примененных к данному элементу.