2

Код JavaScript может обновлять свойства / атрибуты элементов DOM в режиме реального времени, реагируя на события и так далее. Вот пример.

В таблице на этой странице наведите курсор мыши на ячейки. Обратите внимание, как они меняют цвет, когда на них наведена мышь, и этот цвет исчезает, когда вы перемещаете мышь в другую ячейку.

Теперь, используя Firefox или Chrome (но не IE, Opera и т.д.), Я хочу исследовать цвет фона, выраженный в RGB или шестнадцатеричном или чем-либо другом, для ячеек, обновляемых в режиме реального времени, когда курсор мыши входит и покидает область и заставляет JS делать свое дело.

В настоящее время я наблюдаю поведение, заключающееся в том, что функциональность Inspect Element как Firefox, так и Chrome не обновляет значение свойств, поскольку они обновляются с помощью JavaScript. Итак, чтобы просмотреть последнее значение свойства, мне нужно снова проверить элемент, и он делает мгновенный "снимок" значений. Но так как значения меняются только тогда, когда у меня есть мышь, я не могу сделать снимок нужного значения, когда курсор мыши находится над ячейкой, потому что мне нужно убрать мышь из ячейки, чтобы выбрать «Осмотреть Элемент "пункт в списке правой кнопкой мыши!

Если это возможно , чтобы иметь значения обновляются в режиме реального времени с использованием либо Firefox или Chrome, или расширение, на любой последней версии программного обеспечения (до последней стабильной), просьба предоставить инструкции для этого.

1 ответ1

4

Когда вы выберете одну из ячеек в демонстрации, она автоматически выберет <div> который содержится в ячейке, если вы не нажмете ячейку точно на границе:

Однако изменение стиля применяется к ячейке, а не к <div> . Когда вы наводите курсор на ячейку, пока она сосредоточена в инструментах разработчика, вы должны увидеть, как применяется новый CSS. Кроме того, вы можете развернуть панель Computed Style, чтобы увидеть полный набор стилей:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .