Shadow DOM で非表示のスタイルを見つけるにはどうすればよいですか?

シャドウ DOM を覗いて、隠れたスタイルを明らかにします

あなたは、興味深いプレースホルダーの色を持つ Web サイトに遭遇し、その正確な色を再現したいと考えています。シェード。 Chrome Dev Tools で要素を検査しているときに、プレースホルダー関連の情報が表示されないという障害に遭遇しました。

心配しないでください。その秘密は Shadow DOM の探索にあります。謎を解く方法は次のとおりです:

1. 設定を詳しく見てみましょう: まず、Chrome 開発ツール パネルで歯車アイコンをクリックし、[設定] タブを選択します。
2. シャドウ DOM を解放します: 要素セクションで、「ユーザー エージェント シャドウ DOM を表示」というラベルの付いたチェックボックスを見つけてオンにします。
3. 隠しレルムを明らかにします: シャドウありDOM を有効にすると、検査している入力要素に関連付けられたプレースホルダー要素が表示されます。
4. スタイルを覗く: プレースホルダー要素をクリックして CSS プロパティにアクセスし、

指定した具体的な例では、プレースホルダー要素が次のクラスを持っていることがわかります。

.-webkit-input-placeholder

その計算されたスタイルを調査すると、プレースホルダーの色が明らかになります。 、アルファ値を含む。これで、その魅力的なプレースホルダーの色を複製するための準備が整いました。

以上がShadow DOM で非表示のスタイルを見つけるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。