Почему приведенный ниже код возвращает значение цвета?

-2

я проходил через JQuery ready событие и обнаружил следующее:Почему приведенный ниже код возвращает значение цвета?

Обработчика передается .ready() гарантированно будет выполняться после того, как DOM готова, так что это, как правило, лучшее место, чтобы приложить все остальные обработчик событий и запустить другой код jQuery. При использовании сценариев, основанных на значении свойств стиля CSS, важно ссылаться на внешние таблицы стилей или внедрять элементы стиля перед ссылкой на сценарии.

Я предполагаю, что это означает, что если я установил любое свойство CSS после запуска кода jQuery, его значение не будет отражено в коде jQuery. Однако код извлекает значение правильно. Я что-то упускаю? Вот мой код:

<head> 
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     var theColor = $('p').css('color'); 
     $('p').text(theColor); 
    }); 
    </script> 
</head> 
<body> 
    <p>Some Text!</p> 
    <style> 
    p{ color: rgb(29,65,92); } 
    </style> 
</body>

Из моего понимания текст не должен быть изменен на rgb(29,65,92) в этом случае, но это было сделано. Какое объяснение здесь?

EDIT: Если код возвращает правильное значение, потому что он завернут в готовое, что означает следующее утверждение?

При использовании сценариев, которые зависят от значения свойств стиля CSS, важно ссылаться на внешние таблицы стилей или встраивание в стиле элементов перед ссылкой на сценарий.

источник

2016-02-03 SanJeet Singh

Но вы * у * завернутые свой код в '.ready' обработчика! Это не контрпример к заявлению, которое вы опубликовали. –

Что делает «При использовании сценариев, которые полагаются на значение свойств стиля CSS, важно ссылаться на внешние таблицы стилей или внедрять элементы стиля перед ссылкой на сценарии». значит, тогда? –

Это означает, что вам нужно либо ссылаться на скрипты и таблицы стилей в правильном порядке * или * задерживать выполнение скрипта до тех пор, пока не будет применен стиль (что и есть '.ready' в вашем примере). –

Как ваш сценарий и ваш CSS находятся внутри документа (т.е. не внешние), поэтому DOMContentLoaded предупреждение не применяется.

Что документация JQuery указывает вне что если у вас есть внешние скрипты, которые полагаются на вычисленных значений CSS, эти значения не гарантированно доступны в то время DOMContentLoaded пожаров. Вместо этого вы хотите добавить обработчик для load.

источник

2016-02-03 14:38:33

Итак, это означает, что значения могут применяться или не применяться. Нет полной гарантии. –

Это означает, что вы не должны полагаться на 'DOMContentLoaded', если вам нужно запросить значения DOM для CSS. Это во многом зависит от реализации браузера. В некоторых браузерах (Firefox, Chrome) используются интеллектуальные, интеллектуальные синтаксические анализаторы, которые предоставили бы рассчитанные значения CSS в 'DOMContentLoaded', но дело не во всех браузерах, поэтому оно ненадежно. –

Серьезно, идите и прочитайте статью, которую @Anil Kumar уже опубликовал. (Http://stackoverflow.com/questions/1324568/is-document-ready-also-css-ready). –

Ваш код не возвращает rgb(29,65,92), когда я запускаю его в Safari, opera и IE. Эти три браузера отображают Some Text! для <p>, как определено в вашем HTML. Они игнорируют ваш код jQuery. Он отлично работает в Chrome и Firefox. Таким образом, я думаю, что порядок, в котором вы пишете style и script, в большинстве случаев имеет значение, чтобы ваша страница была согласованной между браузерами.

При использовании сценариев, которые зависят от значения свойств стиля CSS, важно ссылаться на внешние таблицы стилей или встраивание в стиле элементов перед ссылкой на сценарий.

Это, вероятно, означает, it might work if you dont do this, but it is important to do this, вероятно, с учетом кросс-браузер compatibility`

источник

2016-02-03 14:53:10 Phani

Почему приведенный ниже код возвращает значение цвета?

ответ

Смежные вопросы