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

Question

Павел @iSawyer

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

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

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

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 в конец инициализацию ваших скриптов, или просто вписать там скрипт генерирующий кастомный евент, и ловить уже его.

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

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Fullstack-разработчик на JavaScript + ИИ

11 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

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

Ответы на вопрос 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

+2 ещё

Сложный
Как заставить библиотеку docs js нарисовать бордер при переносе таблицы?
- 1 подписчик
- 9 часов назад
- 38 просмотров
0

ответов
HTML

+2 ещё

Простой
Как запретить формирования ссылок вида /tel:?
- 2 подписчика
- 01 июл.
- 271 просмотр
2

ответа
JavaScript

+2 ещё

Простой
Как подстраивать размер канваса под размер страницы?
- 1 подписчик
- 01 июл.
- 107 просмотров
0

ответов
HTML

+1 ещё

Средний
Как выставить элементу ширину по содержимому при переносах?
- 1 подписчик
- 30 июн.
- 151 просмотр
1

ответ
HTML

+3 ещё

Средний
Как создать каркас верстки который будет считаться по высоте, а не по ширине?
- 4 подписчика
- 26 июн.
- 350 просмотров
3

ответа
JavaScript

+2 ещё

Простой
Не работает тень + слайдер, есть варианты?
- 2 подписчика
- 21 июн.
- 193 просмотра
1

ответ
HTML

+1 ещё

Простой
Как оформить так карточку типа бенто стиль?
- 1 подписчик
- 13 июн.
- 232 просмотра
3

ответа
JavaScript

Средний
Значение переменной в строку или сохранение в VK?
- 1 подписчик
- 10 июн.
- 147 просмотров
2

ответа
JavaScript

+1 ещё

Сложный
Как сделать логику post запроса покупки товара, если 1 товара не хватает — отменить покупку?
- 2 подписчика
- 10 июн.
- 224 просмотра
1

ответ
JavaScript

Средний
Как правильно вывести данные из функции в див?
- 2 подписчика
- 08 июн.
- 178 просмотров
3

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

Как блок задан? может его что-то преобразует? или подключите стили в самом низу
Однозначно у вас что-то из скриптов меняет стиль отображения блока после загрузки страницы.
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() {
    // Место под ваш код
});

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

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

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

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