所以，這里完全是菜鳥問題，但我希望你能提供幫助。我在一個名為 SRT 的工具上作業，它來自 Facebook，用于對內容進行評級。該頁面顯示了我需要判斷的 9 張影像，但它們顯示為 3 行 3 列，但如果是 5 行 2 列會更好，因為影像會更大。我要求 Facebook 做出這種改變，但誰知道他們什么時候會真正做點什么。所以我在瀏覽器控制臺上修改了頁面的外觀。是這樣的：
<div style="display: grid; grid-template-columns: repeat(3, 500px); grid-template-rows: repeat(3, 500px); gap: 60px; height: 100%; margin: 0px;"><div
我改為：
<div style="display: grid; grid-template-columns: repeat(2, 500px); grid-template-rows: repeat(5, 500px); gap: 60px; height: 100%; margin: 0px;"><div
但是，每次我轉到下一頁時，它都會回到以前的樣子，因為它不是永久性的變化。有沒有辦法保存這種樣式，所以對于這個頁面，我將永遠有這個外觀？
uj5u.com熱心網友回復：
你有幾個選擇來做到這一點。
沒有擴展名
由于 Chrome 65 有一個“覆寫”選項卡devtools > sources，您可以在其中修改各個資源。查看此答案以獲取如何執行此操作的指南：Override Javascript file in chrome。需要注意的是，您需要保持開發工具打開。
帶擴展名
我過去使用這個擴展取得了很好的效果：Resource Override。我相信它最近已進入維護模式，但它完美無缺。您可以注入新樣式、腳本等或覆寫現有樣式。
選擇 div
無論您采用哪種方法，都會選擇那個 div。看起來它只是應用了一堆行內樣式，沒有特定的類。您撰寫的任何選擇器都可能非常脆弱，因為它將依賴于特定的 dom 結構。
但是由于這只是您機器的本地覆寫，所以我們不要太擔心。您可以使用屬性選擇器來定位具有特定行內樣式的 div。你可能想讓它更具體一點，以防有任何其他具有相似grid-template-columns值的 div。這有點hacky，但這應該讓你開始：
div[style*='grid-template-columns: repeat(3, 500px)'] {
grid-template-columns: repeat(2, 500px) !important;
}<div style="display: grid; grid-template-columns: repeat(3, 500px); grid-template-rows: repeat(3, 500px); gap: 60px; height: 100%; margin: 0px;">
<div>column 1</div>
<div>column 2</div>
<div>column 3</div>
<div>column 4</div>
<div>column 5</div>
</div>uj5u.com熱心網友回復：
我總是喜歡學習，您從控制臺更改的代碼是由 Facebook 服務器生成的副本。每次您輸入 URL facebook.com 都會為您生成一份 HTML 代碼副本并將其發送到您的瀏覽器，您可以從中進行編輯。但該編輯不是永久性的，因為它僅在您的瀏覽器上進行編輯，而不是在 Facebook 服務器上。
有幾種可能的場景可以使用。最流行的一種是創建瀏覽器擴展程式，每次您從 Facebook 收到副本時，擴展程式都會首先更改代碼，然后將其顯示在您的瀏覽器上。但是 facebook 有一種可能性是動態生成它的選擇器，比如類和 id。
我希望它有幫助；）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/489048.html