Код JavaScript может обновлять свойства / атрибуты элементов DOM в режиме реального времени, реагируя на события и так далее. Вот пример.
В таблице на этой странице наведите курсор мыши на ячейки. Обратите внимание, как они меняют цвет, когда на них наведена мышь, и этот цвет исчезает, когда вы перемещаете мышь в другую ячейку.
Теперь, используя Firefox или Chrome (но не IE, Opera и т. Д.), Я хочу исследовать цвет фона, выраженный в RGB или шестнадцатеричном или чем-либо другом, для ячеек, обновляемых в реальном времени, когда курсор мыши входит в область и покидает ее. и заставляет JS делать свое дело.
В настоящее время я наблюдаю поведение, заключающееся в том, что функциональность Inspect Element как Firefox, так и Chrome не обновляет значение свойств, поскольку они обновляются с помощью JavaScript. Итак, чтобы просмотреть последнее значение свойства, мне нужно снова проверить элемент, и он делает мгновенный «снимок» значений. Но так как значения меняются только тогда, когда у меня есть мышь, я не могу сделать снимок нужного значения, когда курсор мыши находится над ячейкой, потому что мне нужно убрать мышь из ячейки, чтобы выбрать «Осмотреть Элемент "пункт в списке правой кнопкой мыши!
Если это возможно, чтобы иметь значения обновляются в режиме реального времени с использованием либо Firefox или Chrome, или расширение, на любой последней версии программного обеспечения (до последней стабильной), просьба предоставить инструкции для этого.
Когда вы выбираете одну из ячеек в демонстрации, она автоматически выберет то, <div>что содержится в ячейке, если вы не коснетесь ячейки точно на границе:
Однако изменение стиля применяется к ячейке, а не к <div>. Когда вы наводите курсор на ячейку, пока она сосредоточена в инструментах разработчика, вы должны увидеть, как применяется новый CSS. Кроме того, вы можете развернуть панель Computed Style, чтобы увидеть полный набор стилей:
