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

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.

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

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

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- 3 часа назад
- 33 просмотра
0

ответов
JavaScript

Простой
Postman. Как увеличить время жизни токена?
- 1 подписчик
- 4 часа назад
- 83 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- вчера
- 110 просмотров
1

ответ
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 91 просмотр
2

ответа
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- 21 дек.
- 1668 просмотров
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- 21 дек.
- 59 просмотров
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 85 просмотров
2

ответа
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 101 просмотр
1

ответ
JavaScript

+2 ещё

Средний
Как можно изменить настройки модуля навигации карт Google на Яндекс карты?
- 2 подписчика
- 19 дек.
- 214 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 107 просмотров
0

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Сделать js-модуль для Тильды

23 дек. 2024, в 14:47

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

Телеграм бот для автоматизации генерации текста с ChatGPT-o1

23 дек. 2024, в 14:26

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

Elevenlabs генерация голоса

23 дек. 2024, в 14:10

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

Дело не в 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 Автор вопроса

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

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

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

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

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

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