XAKEPEHOK
@XAKEPEHOK

LESS и document.body.clientWidth — почему не работает?

С трудом сдерживаю себя чтобы не выразить эмоции матом. Мучаюсь уже пару часов.

Есть следующий HTML код
<!DOCTYPE html>
<html>
  <head>
    <title>Тестовый проект</title>
	<meta charset="UTF-8" />
	<link rel="stylesheet/less" type="text/css" href="styles.less">
    <script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>	
  </head>
  <body>	
	<div class="metroContent">Проверка</div>
  </body>
</html>


и файл Styles.less
html {height: 100%; width: 100%;}
body {background: #6ab56e; width: 100%; height: 100%;}

@pro: `document.body.clientWidth`;
.metroContent {margin-left: @pro;}


Так вот, document.body.clientWidth не возвращает по-видимому ничего и вообще при его использовании ни один из стилей не применяется (ошибка js?), но вот window.innerWidth срабатывает «на ура». Как я понимаю разница между ними в том, что первый возвращает ширину документа, а второй — ширину окна. И первый не срабатывает потому, что дерево DOM возможно еще не построено (поправьте если ошибаюсь).
Все бы ничего, но глядя на эту табличку я думаю, что о кроссбраузерности (а именно IE) с использованием window.innerWidth можно забыть.

Исходя из того, что я думаю о неработоспособности (см. выше) меня не удивляет что сие работает успешно (см. через webkit object inspector, opera dragonfly и подобные) на jsfiddle.net потому, что там оно в iframe сделано на уже построенной странице с известной шириной и высотой, где данные подгружаются через json

Но тогда у меня возникает вопрос, почему в официальной документации сей метод красуется? И многие о нем говорят и пишут, мол какая хорошая штука.

P.S. Я знаю что в моем варианте переменная @рro не содержит единицу измерения и не отобразиться корректно. Дело не в этом. В инспекторе объектов можно увидеть что по крайней мере оно присваивается (в случае использования window.innerWidth или в примере jsfiddle)
P.P.S. В хроме (а может и в других браузерах) less.js не будет работать через file:// — используйте веб-сервер
  • Вопрос задан
  • 4493 просмотра
Решения вопроса 1
Desiderata
@Desiderata
При проверки вашего кода я получаю ошибку «TypeError: document.body is null», что вполне логично.
Как костыль: можно выполнять less.js после загрузки страницы:
$(document).ready(function()
{
$.getScript('http://lesscss.googlecode.com/files/less-1.3.0.min.js');
});


Кстати, проверить переменную можно так:
.metroContent:after
{
	content: "@{pro}";
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
deleted-mifki
@deleted-mifki
А почему нельзя просто margin-left: 100%;?
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы