Как изменить стиль у объекта?

Question

Максим @VGross2016

JavaScript

Как изменить стиль у объекта?

"use strict"
let btn = document.getElementById("start"),
box = document.querySelector('.main .inside');

box.style.backgroundColor = 'blue';

Как поменять стиль box??? всегда попадаю на ошибку :
Uncaught TypeError: Cannot read property 'style' of undefined

Вопрос даже не в том как сменить) Почему так происходит? почему "не удаётся прочитать свойство"? Всегда на такую ошибку натыкаюсь что бы не писал с .style.

Вопрос задан более трёх лет назад
95 просмотров

11 комментариев

Подписаться 1 Простой 11 комментариев

Пашенька @like-a-boss

Дело не в style, а в том, что элемента такого нет - неправильный селектор, или такого элемента нет на момент выполнения кода. Врубаетесь?

Написано более трёх лет назад
Максим @VGross2016 Автор вопроса

like-a-boss, не очень! если бы врубался - не писал бы))) как понять "нет такого элемента", если он точно есть!

Написано более трёх лет назад
Пашенька @like-a-boss

VGross2016, А я говорю, что его ТОЧНО нет. Вместо box.style.backgroundColor = 'blue'; напишите console.log(box); и загляните в консоль (f12)

Написано более трёх лет назад
Пашенька @like-a-boss

VGross2016, а вообще нужно создать codepen, здесь мало кому интересно гадать на кофейной гуще.

Написано более трёх лет назад
Максим @VGross2016 Автор вопроса

like-a-boss, КОНЕЧНО я первым делом посмотрел в консоль(наверное, не очень внимательно)
В консоль выводится:
<div class="inside"></div>
как раз то, у чего я пытаюсь сменить стиль!

Написано более трёх лет назад
Пашенька @like-a-boss

VGross2016, Тогда надо смотреть в инспекторе, возможно стиль устанавливается(он должен), но по приоритету есть правило с !important, которое главенствует и не даёт применить стиль.

Написано более трёх лет назад

Максим @VGross2016 Автор вопроса

like-a-boss, да это примитивнейший пример, на отработку анимации - 2 квадрата(дива) один в одном. Ничего особого. но когда анимация не сработала, решил проверить, применяются ли свойства к одному и второму - ессссстественно что нет))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Set-time</title>
</head>
<body>
    <input type="button" value="START" id="start">
   <div class="main">
   <div class="inside"></div>
    </div>
    <script src = "script.js"></script>
</body>
</html>

"use strict"

let btn = document.getElementById("start"),
    box = document.querySelector('.main .inside');

//document.box.style.backgroundColor = 'blue';

console.log(box);

Написано более трёх лет назад

Пашенька @like-a-boss

VGross2016, ну вот. Здесь нечему не работать. В комментарии была ошибка document.

Написано более трёх лет назад
Максим @VGross2016 Автор вопроса

like-a-boss, Супер! Работает! Спасибо! НО КАК?!?!?!? Я НИХРЕНА НЕ СДЕЛАЛ!!!!! ВЧЕРА НЕ РАБОТАЛО!!! теперь работает, каааак?????

Написано более трёх лет назад
Пашенька @like-a-boss

VGross2016, Как я уже сказал, здесь могут быть внешние факторы: например, я могу к этой странице подключить некий CSS файл и сделать так, что оно не будет работать. То же самое и с JS файлом - тоже можно всё испортить. А так, это просто пример в вакууме, там реально нечем и нечему ломаться.
Кроме этой ошибки document.box.style.backgroundColor = 'blue'; вместо box.style.backgroundColor = 'blue';, хотя в изначальном вопросе написано правильно.
Ещё, кстати, не стоит забывать про кеш браузера - тоже может создать проблем.

Написано более трёх лет назад
Максим @VGross2016 Автор вопроса

like-a-boss, СПАСИБО!

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Средний
Ошибки со Swiper + GSAP анимацией?
- 1 подписчик
- 8 часов назад
- 16 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как автоматически подставлять значение в value?
- 1 подписчик
- 15 часов назад
- 119 просмотров
1

ответ
JavaScript

+1 ещё

Сложный
Почему MediaSource не работает?
- 2 подписчика
- вчера
- 118 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как правильно посылать и получать данные у WebSocket?
- 1 подписчик
- вчера
- 85 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как подключить Deepl на сайт?
- 2 подписчика
- вчера
- 243 просмотра
1

ответ
JavaScript

Простой
Как получить Get запрос?
- 1 подписчик
- вчера
- 104 просмотра
2

ответа
JavaScript

+3 ещё

Средний
Как открыть ссылки СБП из iframe в Яндекс.Браузер с редиректом на банковское приложение на телефоне Android?
- 2 подписчика
- вчера
- 172 просмотра
1

ответ
JavaScript

Простой
Сравнить элементы массива js и отфильтровать если будет более 3-х дублей одного элемента?
- 1 подписчик
- вчера
- 172 просмотра
1

ответ
JavaScript

Средний
Как динамически изменять цвет контента блока в зависимости от фона?
- 1 подписчик
- 15 мая
- 79 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как экспортировать переменную так, чтобы можно было менять ее значение в другом файле?
- 1 подписчик
- 14 мая
- 140 просмотров
2

ответа
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript Developer (backend / fullstack)

Brightdata • Тель-Авив

от 5 500 до 6 500 $

JavaScript FullStack разработчик

Rocket • Брянск

от 60 000 до 100 000 ₽

Провести анализ сайта с точки зрения программирования

18 мая 2024, в 01:21

2000 руб./за проект

Директ: настройка и ведение для салона красоты в Москве

18 мая 2024, в 00:47

12000 руб./за проект

Предложить и рассчитать фильтр переключателя аудио

17 мая 2024, в 23:44

1000 руб./за проект

Дело не в style, а в том, что элемента такого нет - неправильный селектор, или такого элемента нет на момент выполнения кода. Врубаетесь?
like-a-boss, не очень! если бы врубался - не писал бы))) как понять "нет такого элемента", если он точно есть!
VGross2016, А я говорю, что его ТОЧНО нет. Вместо box.style.backgroundColor = 'blue'; напишите console.log(box); и загляните в консоль (f12)
VGross2016, а вообще нужно создать codepen, здесь мало кому интересно гадать на кофейной гуще.
like-a-boss, КОНЕЧНО я первым делом посмотрел в консоль(наверное, не очень внимательно)
В консоль выводится:
<div class="inside"></div>
как раз то, у чего я пытаюсь сменить стиль!
VGross2016, Тогда надо смотреть в инспекторе, возможно стиль устанавливается(он должен), но по приоритету есть правило с !important, которое главенствует и не даёт применить стиль.
like-a-boss, да это примитивнейший пример, на отработку анимации - 2 квадрата(дива) один в одном. Ничего особого. но когда анимация не сработала, решил проверить, применяются ли свойства к одному и второму - ессссстественно что нет))
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Set-time</title> </head> <body> <input type="button" value="START" id="start"> <div class="main"> <div class="inside"></div> </div> <script src = "script.js"></script> </body> </html>

"use strict" let btn = document.getElementById("start"), box = document.querySelector('.main .inside'); //document.box.style.backgroundColor = 'blue'; console.log(box);
VGross2016, ну вот. Здесь нечему не работать. В комментарии была ошибка document.
like-a-boss, Супер! Работает! Спасибо! НО КАК?!?!?!? Я НИХРЕНА НЕ СДЕЛАЛ!!!!! ВЧЕРА НЕ РАБОТАЛО!!! теперь работает, каааак?????
VGross2016, Как я уже сказал, здесь могут быть внешние факторы: например, я могу к этой странице подключить некий CSS файл и сделать так, что оно не будет работать. То же самое и с JS файлом - тоже можно всё испортить. А так, это просто пример в вакууме, там реально нечем и нечему ломаться.
Кроме этой ошибки document.box.style.backgroundColor = 'blue'; вместо box.style.backgroundColor = 'blue';, хотя в изначальном вопросе написано правильно.
Ещё, кстати, не стоит забывать про кеш браузера - тоже может создать проблем.

Answer 1 · 2019-11-23 19:51:02

Максим @VGross2016 Автор вопроса

Ответ написан более трёх лет назад

Комментировать

Как изменить стиль у объекта?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт