Могу ли я настроить таргетинг на элемент до его закрытия?
Я хочу добавить класс к тегу body, не дожидаясь загрузки DOM, но я хочу знать, будет ли применим следующий подход. Меня больше беспокоит законность, чем то, поддерживают ли ее пока браузеры.
<body>
$("body").addClass("active");
...
</body>
Спасибо, Стив
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Если элемент не существует в DOM, поиск не найдет его и действие не будет применено. Если вы не можете сделать это в функции $ (document) .ready (), вы можете попробовать поместить код после элемента, на который указывает ссылка. Я верю, что это сработает.
<body>
<div id='topStories'></div>
<script type='text/javascript'>
$('div#topStories').addClass('active');
</script>
</body>
Если вам нужно добавить класс в тело, я бы обязательно использовал $ (document) .ready ().
Я говорю, что это самый безопасный способ. Я бы предположил, что, поскольку элемент может быть не полностью определен (отсутствует конечный тег), браузер не будет добавлять его в DOM, пока он не будет полностью проанализирован. Однако я не могу указать на стандарт, который это обеспечивает.
Оценил. Я уточню еще немного и посмотрю, как я зажгу новые нейроны - ура.
Короткий ответ: это зависит от обстоятельств. Судя по моим тестам, ответ будет положительным, в зависимости от того, что вы хотите. Я только что проверил это:
<html>
<head>
<style type = "text/css">
.foobar { background-color: #CCC; }
</style>
</head>
<body>
<script type = "text/javascript">
window.document.body.className = "foobar";
</script>
<div style = "border: solid 1px"><br /></div>
<script type = "text/javascript">
// happens before DOM is fully loaded:
alert(window.document.body.className);
</script>
<span>Appears after the alert() call.</span>
</body>
</html>
В IE 7, когда происходит alert(), значение устанавливается правильно, но стиль еще не применен (он применяется быстро, как только DOM завершает загрузку).
В Firefox этот стиль был применен к моменту появления alert().
В любом случае, надеюсь, это будет вам полезно.
Это было ОЧЕНЬ полезно.
Чтобы задать вопрос немного реального мира.
Я строю с предположением, что JavaScript не поддерживается, а затем переопределяю с помощью JavaScript. Проблема в том, что когда мне нужно дождаться загрузки DOM, прежде чем мои переопределения на сайте пройдут стадию мерцания по мере его создания. Я надеюсь, что если я смогу добавить класс «active» к элементу body до загрузки остальной части сайта, я смогу применить предполагаемые стили JavaScript до того, как страница будет отрисована.
Чего я не хочу делать, так это добавлять это, а затем получать звонок, когда выходит Firefox4, что я не должен был этого делать.
Если вы посмотрите на сайт, который я создал, вы увидите, что он постепенно деградирует, но меня это беспокоит (особенно, если реклама вешает сайт). Я мог бы воспользоваться подходом других парней и просто построить его с предполагаемым JS, но давай - это просто лениво ...
@Jason, знание, что FF и IE по разному реагируют. По сути, это отвечает на мой первоначальный вопрос, но, учитывая, что Мар дал мне мое решение, я должен был воздать ему должное. Хотел бы я поделиться им :)
По сути, ответ отрицательный. В IE6 и Firefox 2 (браузеры, в которых я наиболее опытен) элемент отсутствует в DOM до тех пор, пока не будет завершен тег закрытия (или страница не будет отрисована для недопустимого XHTML). Я знаю, что jQuery предоставляет удобные методы, которые, кажется, достаточно быстро реагируют, чтобы избежать «мерцания» в большинстве случаев. Вы бы использовали это так:
<script>
$(document).ready(function() {
$("body").addClass("active");
});
</script>
<body>
..
..
..
</body>
Но это все, что касается javascript.
Конечно, в приведенном вами примере вы можете легко добиться того же эффекта с помощью:
<body class = "active">
</body>
Плагин .elementReady () кажется довольно близким к тому, что вы ищете.
Он работает с использованием цикла setInterval, который завершается, как только document.getElementById() возвращает элемент для данного id.
Вероятно, вы могли бы немного изменить этот плагин (или зафиксировать обновление / патч), чтобы разрешить общие селекторы (по крайней мере, для «tagNames») вместо только id.
Я не верю, что существует действительно надежный кроссбраузерный способ адресации элемента до его загрузки - кроме такого рода взлома setInterval.
Если вы не можете разместить свою команду javascript внутри, целевой элемент, такой как @JasonBunting, предлагает.
Вместо добавления класса в тег <body> вам может быть проще добавить класс в тег <html>, выполнив:
<script type = "text/javascript">
document.documentElement.className = 'active';
</script>
Итак, если я вас правильно понял, вы говорите, что элемент не существует, пока он не будет закрыт. Это верно?