Как присвоить стиль элементу до отрузки dom?

Question

[newaitix]

Как можно изменить стиль элемента div до отгрузки dom модели без использования jquery и подобных костылей.
Второй вопрос где можно почитать подробное описание всех этапов загрузки и отрисовки элемента или блока на сайте.
Возможно ваши предположения как это делает jquery.

Answer 1

[Push Pull]

хм, дайте ка подумать.
как то так

<style>
нужный стиль для нужного елемента
</style>

и что вы подразумеваете под "до отгрузки dom модели" куда она отгружается то?
может это поможет?

Comments

[newaitix]

Ну разумеется я имел ввиду присвоить стиль javascript-ом

[Push Pull]

@newaitix чур вас. если вы стили делаете через js

[Евгений Петров]

@deadbyelpy да вы их и сами делаете. Или в jQuery вы не пользуетесь ни css(), ни animate() и вообще ничем-ничем?
И потом, необязательно работать с инлайн-стилями, когда есть коллекция Stylesheets со своими интерфейсами.

[Push Pull]

@Petroveg конечно использую, но совсем в редких случаях, когда мне лень написать класс для этого. Считаю, что стили должны быть в стилях, а не в js.
Иначе для добавления функционала, правки текущего да и просто отладки, приходится пользоваться поиском по файлам js, и не факт что объект передаваемый в $().css() не был изменен в процессе.

[Евгений Петров]

Вы абсолютно правильно считаете, но зачастую приходится использовать динамическое присвоение инлайн-стилей в JS. В вопросе речь идёт об изменении стиля. А коррекции вполне допустимы.

[newaitix]

@deadbyelpy: Не надо меня чур js поможет мне понять основы а используя jquery я никогда не буду знать что там происходит

Answer 2

[whats]

создаете в кеше элемент, Вешаете ему стиль, помещаете его в документ
Что именно вам тут не понятно ?

Answer 3

[Евгений Петров]

1. Абсолютно все элементы на странице (в том числе style, link и script) появляются в результате парсинга кода страницы. Построение DOM и CSSOM — всего лишь часть процесса.

2. В свете этого можно переформулировать вопрос. Например так:

Как установить для элемента стили до его рендеринга на странице?

Правильно — в стилях. Можно в тех, что загружаются с сервера, а можно создать их на лету. Поскольку парсер HTML ожидает завершения обработки скрипта, а head уже однозначно есть, то стиль будет создан и учтён при рендеринге страницы. Который, замечу, работает до наступлениясобытия DOMContentLoaded.

Comments

[newaitix]

То есть вы имеете ввиду что мне нужно создать элемент и присвоить ему стиль. А браузер потом его заберет при отрисовке?

[newaitix]

А вообще возможно я не правельно подал вопрос. Суть заключается в том чтоб я имел на руках объект элемента до его отрисовки тогда я смогу и стиль ему присвоить и событие на него повесить и сделать с ним все что заблогорасудится.

[newaitix]

Пока нет элемента document.getElementById(...) будит возвращять мне null

[Евгений Петров]

@newaitix: в большинстве случаев не нужно вешать на элемент обработчики — событие всплывает до window и лучше ловить его там.
Так же и стиль — я могу динамически создать стиль под его селектор.
И всё это можно делать до наступления DOMContentLoaded.

[newaitix]

@Petroveg: Нет я все же не понимаю смотрите я пишу document.getElementById(...).style то есть null.style. Блок с которым мне нужно работать приходить в виде текста из ajax запроса. Так тоже не работает document.styleSheets.insertRule("#tests_scc { color: white }", 0);

[Евгений Петров]

@newaitix: вы демонстрируете незнание предмета разговора. jsfiddle.net/petroveg/r0teyn1e

[newaitix]

Ага так разобрался не правильно писал document.styleSheets[0].insertRule("#tests_css{background:rgb(0,0,0)}",0);
но как же быть с обработчиком

[newaitix]

Добавлю без использования jquery разумеется.

[newaitix]

@Petroveg: Вы правы я не силен в этом вопросе. Не знаю основ.

[newaitix]

Для обработчика я вижу только один вариант. document.onclick=function(){if(event.target.tagName == "A")..... Я правельно думаю? Подскажите

[newaitix]

Та даже не в обработчике дело это все что касается элементов получить атрибут например

[Евгений Петров]

@newaitix: зачем вам пытаться решать задачи без jQuery, если он значительно облегчает жизнь?
Вот то же самое на чистом JS jsfiddle.net/petroveg/r0teyn1e/1
Я умею так писать, но не пишу, потому считаю потерей времени. А вам это зачем?

[newaitix]

Вы сами говорите что я не владею вопросом. Проблема моя в том что я начал что то писать на jquery где все просто $(element) и ты можешь делать все что угодно. Когда же я захотел выйти за рамки jquery я понял что я абсолютно ничего не знаю в javascript не знаю основ а значит не знаю ничего. И поставил себе цель переписать все что было написано под jquery на native JavaScript

[Евгений Петров]

@newaitix: ну так подход к навешиванию обработчика на document актуален везде, и неважно — используется ли jQuery, или это — нативный JS.
Хотя да — вы правы, без знаний языка, его работы с DOM, а также ряда WebAPI тяжело прогрессировать.

[newaitix]

@Petroveg: как это ведь в случае с jquery я могу написать $(element) и меня как бы не интересовало как там jquery с этим разбирается (хотя я уже понимаю что наверняка он не навешивает на конкретный элемент событие а вешает его на весь document).
В случае же с javascript я увидел разные варианты document.onclick=function(event){// тут узнать через event все об этом элементе или document.addEventListener('click', function(event){// тут узнать через event

[Евгений Петров]

$(element) ... вешает его на весь document — конечно нет. Вешает именно на element.
document.onclick — фу...
document.addEventListener — да, да и да.

[newaitix]

@Petroveg: Вы как то не понятно выражаетесь "$(element) ... вешает его на весь document — конечно нет". Вот я хочу разобраться как jquery это делает.
Вешает на весь документ?- тогда мне все понятно я разобрался уже.
Вешает на каонкретный элемент?-тогда мне не понятно как можно повесить событие на элемент которого еще не существует.

[Евгений Петров]

@newaitix: для вас непонятно, потому что для начала вам следует прочесть про модель событий.
$(element).on() вешает обработчик на element. Что тут непонятного?
Как можно слушать событие, не регистрируя его в самом узле, а на document — понятно же, $(document).on().
В общем, читайте уже учебники.