使用谷歌瀏覽器直接改變元素顏色?

前端開發人員經常性的會使用谷歌瀏覽器審查元素的樣式,今天小漁發現其還可以幫我們直接改變元素的顏色,不需要寫任何代碼的哦,前提是隻能將元素的顏色值改成頁面中已經存在的顏色值,

方法/步驟

首先,我們使用瀏覽器打開任意一個網頁,就以為例了。

使用谷歌瀏覽器直接改變元素顏色

然後,我們按下鍵盤上小鍵盤中的F12鍵。或者選擇“開發者工具”

使用谷歌瀏覽器直接改變元素顏色

這樣我們就看到瀏覽器最下面的程序員可以調試頁面樣式的界面。

使用谷歌瀏覽器直接改變元素顏色

然後我們找到頁面中的一個字體顏色比較明顯的元素,“右鍵”選擇“審查元素”,我選擇的是“最新分享”這幾個字。

使用谷歌瀏覽器直接改變元素顏色

我們在右側的樣式欄中可以看到這幾個字的顏色值,在顏色值的前面有一個顯示顏色樣子。我們點擊它,就會出現顏色列表。

使用谷歌瀏覽器直接改變元素顏色

然後,我們將鼠標移動到頁面上,可以看到,有一個圓形的球在隨著我們的鼠標進行移動。鼠標移動到發佈經驗的綠色按鈕上,圓球就變成按鈕的顏色了,我們單擊鼠標,可以看到之前“審查元素”的文字的顏色也變成綠色了。(這張圖是手機拍下來的,實現找不到可以截圖下來的辦法了。)

使用谷歌瀏覽器直接改變元素顏色

我們按照這種方法,隨意的任意移動鼠標就可以將文字換成頁面上已經使用的其他顏色值,很是方便哦。

相關問題答案