Почему не срабатывает скрипт?

Question

Павел @iSawyer

Почему не срабатывает скрипт?

Здравствуйте!
Простейшая задача – вывести значение display элемента div.
Для теста вывожу в консоль:
console.log($('div.full-desc').css('display'));
Проблема в том, что всегда выводится "block", хотя в стилях задан "table". Пробовал через window.onload, $(document).ready и т.п. Помогло только при выводе с помощью setTimeout, но хочется понять, как можно сделать без этого.

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

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

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

Andrew @KickeRocK

Как блок задан? может его что-то преобразует? или подключите стили в самом низу

Написано более трёх лет назад
ThunderCat @ThunderCat Куратор тега JavaScript

Однозначно у вас что-то из скриптов меняет стиль отображения блока после загрузки страницы.

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

Павел @iSawyer Автор вопроса

Andrew, ThunderCat, полностью очистил страницу для теста, оставил только это:

<!DOCTYPE html>
<html lang="ru">
<head>
	<link rel="stylesheet/less" href="/css.less">
	<script src="/jq.js"></script>
	<script src="/less.js"></script>
</head>
<body>
	<div class="full-desc"></div>
	<script>
		window.addEventListener('load', function() {
    		console.log($('div.full-desc').css('display'));
		});
		setTimeout(function () {
   			console.log($('div.full-desc').css('display'));
		}, 100);
	</script>
</body>
</html>

Первый вариант – block, с задержкой - table.
CSS также чистый, только div.full-desc {display: table;}

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

Andrew @KickeRocK

Алексей, попробуйте отключить все скрипты и проделать этоже

Написано более трёх лет назад
ThunderCat @ThunderCat Куратор тега JavaScript

Алексей,
полностью очистил страницу для теста,
То есть то что вы оставили 3 скриптовых подключения - это норм... Скорее всего ваш лесс фигачит свои стили, как вариант - скомпилить в православный цсс и не мучиться.

Написано более трёх лет назад
Павел @iSawyer Автор вопроса

ThunderCat, Andrew, да, я в ответе ниже прокомментировал этот момент – проблема именно в LESS. Если подключить обычный CSS, то все ок. Но этот вариант не совсем устраивает, поэтому, может, у кого-то есть идеи. Спасибо.

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

Алексей, ну так в чем тогда вопрос?)
ваш лесс переопределяет стили элементов, поэтому так выводится, вам нужно как-то преобразовывать это?

Написано более трёх лет назад
ThunderCat @ThunderCat Куратор тега JavaScript

Алексей, так а в чем задача то? Вам же не просто так определить тип блока нужно? Какой смысл в этих действиях?

Написано более трёх лет назад
Павел @iSawyer Автор вопроса

ThunderCat, если блок скрыт, то сделать одно действие. Если не скрыт, то другое.

Andrew, как сделать работу скрипта без таймаута, но при этом не меняя LESS на CSS :)
Не очень понял про переопределение стилей. В стилях LESS указано table, а скрипт выдает block. Отсюда мысли, что мой скрипт срабатывает до того, как less.js преобразует все мои стили. То есть как бы мой скрипт не видит стилей вообще, поэтому берет стандартные значения: div = block, span = inline, table = table.

Написано более трёх лет назад
ThunderCat @ThunderCat Куратор тега JavaScript

Алексей,
если блок скрыт, то сделать одно действие. Если скрыт, то другое.
То есть скрыт или скрыт? )) Впрочем суть понятна ))

Не проще определять что дисплей НЕ нон, чем определять что дисплей блок/тэйбл....?

Написано более трёх лет назад
Павел @iSawyer Автор вопроса

ThunderCat, это само собой, про table написал просто для теста. Если в LESS задано none, то скрипт показывает также block, если не пользоваться таймаутом.

Написано более трёх лет назад
ThunderCat @ThunderCat Куратор тега JavaScript

Алексей, как вариант - вручную дописать в less.js в конец инициализацию ваших скриптов, или просто вписать там скрипт генерирующий кастомный евент, и ловить уже его.

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

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

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

4 комментария

Павел @iSawyer Автор вопроса

Не помогло. Полностью очистил страницу для теста, оставил только это:

<!DOCTYPE html>
<html lang="ru">
<head>
	<link rel="stylesheet/less" href="/css.less">
	<script src="/jq.js"></script>
	<script src="/less.js"></script>
</head>
<body>
	<div class="full-desc"></div>
	<script>
		window.addEventListener('load', function() {
    		console.log($('div.full-desc').css('display'));
		});
		setTimeout(function () {
   			console.log($('div.full-desc').css('display'));
		}, 100);
	</script>
</body>
</html>

С вашим вариантом выдает block, с задержкой - table.
CSS также чистый, только div.full-desc {display: table;}

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

Надим @zkrvndm

Алексей, попробуйте так:

window.addEventListener('load', function() {
    element = document.querySelector('div.full-desc');
    info = window.getComputedStyle(element).display;
    console.log(info);
});

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

Павел @iSawyer Автор вопроса

Надим Закиров, в моем случае тоже не сработало, проверил через JSFiddle - все ок. Начал копаться в коде и пришел к выводу, что проблема в подключении less стилей, а не css. То есть если оставить все как было, но LESS файл преобразовать в CSS и подключить CSS, то работает. Но такой вариант не очень устраивает, поэтому может будут какие-то мысли на основе этой информации. Спасибо.

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

Алексей, ранее дел с LESS не имел, вряд ли помогу. Единственная умная мысль, это найти способ повесить обработчик на факт загрузки LESS и уже только после этого запускать код.

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

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

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

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

JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 2 часа назад
- 39 просмотров
0

ответов
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 4 часа назад
- 62 просмотра
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 7 часов назад
- 78 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 12 часов назад
- 71 просмотр
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 16 часов назад
- 291 просмотр
1

ответ
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 часа назад
- 70 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 часа назад
- 50 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- вчера
- 58 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- вчера
- 66 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- вчера
- 40 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

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

До 220 000 ₽

Разработать телеграм mini app игру и бота

23 нояб. 2024, в 20:48

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

Ведение блогоаи продвижение в Instagram, TikTok и Телеграмм

23 нояб. 2024, в 20:46

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

Доработки шаблона Wordpress

23 нояб. 2024, в 20:39

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

Как блок задан? может его что-то преобразует? или подключите стили в самом низу
Однозначно у вас что-то из скриптов меняет стиль отображения блока после загрузки страницы.
Andrew, ThunderCat, полностью очистил страницу для теста, оставил только это:
<!DOCTYPE html> <html lang="ru"> <head> <link rel="stylesheet/less" href="/css.less"> <script src="/jq.js"></script> <script src="/less.js"></script> </head> <body> <div class="full-desc"></div> <script> window.addEventListener('load', function() { console.log($('div.full-desc').css('display')); }); setTimeout(function () { console.log($('div.full-desc').css('display')); }, 100); </script> </body> </html>

Первый вариант – block, с задержкой - table.
CSS также чистый, только div.full-desc {display: table;}
Алексей, попробуйте отключить все скрипты и проделать этоже
Алексей,
полностью очистил страницу для теста,
То есть то что вы оставили 3 скриптовых подключения - это норм... Скорее всего ваш лесс фигачит свои стили, как вариант - скомпилить в православный цсс и не мучиться.
ThunderCat, Andrew, да, я в ответе ниже прокомментировал этот момент – проблема именно в LESS. Если подключить обычный CSS, то все ок. Но этот вариант не совсем устраивает, поэтому, может, у кого-то есть идеи. Спасибо.
Алексей, ну так в чем тогда вопрос?)
ваш лесс переопределяет стили элементов, поэтому так выводится, вам нужно как-то преобразовывать это?
Алексей, так а в чем задача то? Вам же не просто так определить тип блока нужно? Какой смысл в этих действиях?
ThunderCat, если блок скрыт, то сделать одно действие. Если не скрыт, то другое.

Andrew, как сделать работу скрипта без таймаута, но при этом не меняя LESS на CSS :)
Не очень понял про переопределение стилей. В стилях LESS указано table, а скрипт выдает block. Отсюда мысли, что мой скрипт срабатывает до того, как less.js преобразует все мои стили. То есть как бы мой скрипт не видит стилей вообще, поэтому берет стандартные значения: div = block, span = inline, table = table.
Алексей,
если блок скрыт, то сделать одно действие. Если скрыт, то другое.
То есть скрыт или скрыт? )) Впрочем суть понятна ))

Не проще определять что дисплей НЕ нон, чем определять что дисплей блок/тэйбл....?
ThunderCat, это само собой, про table написал просто для теста. Если в LESS задано none, то скрипт показывает также block, если не пользоваться таймаутом.
Алексей, как вариант - вручную дописать в less.js в конец инициализацию ваших скриптов, или просто вписать там скрипт генерирующий кастомный евент, и ловить уже его.

Answer 1 · 2019-11-06 18:51:02

Если помогло только setTimeout то значит есть вероятность того, что у вас скрипт стартует раньше загрузки страницы. Попробуйте запускать свой код только после полной загрузки сайта:

window.addEventListener('load', function() {
    // Место под ваш код
});

Почему не срабатывает скрипт?

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

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

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