如何通過 Chromium 瀏覽器禁用網站上的按鈕四舍五入？

Question

我正在尋找一種方法來通過開發人員控制台禁用網站上所有按鈕的舍入。 到目前為止，似乎沒有任何效果。 可以使用 Javascript 在整個腳本中覆蓋按鈕樣式嗎？

提前致謝。

Answer 1

它應該是這樣的：

document.querySelectorAll("button").forEach(( b ) => {
    b.style.borderRadius = "0";
    b.style.borderEndEndRadius = "0";
    b.style.borderEndStartRadius = "0";
    b.style.borderTopLeftRadius = "0";
    b.style.borderTopRightRadius = "0";
    b.style.borderBottomRightRadiusRadius = "0";
    b.style.borderBottomLeftRadiusRadius = "0";
    b.style.borderCollapse = "separate";
});

document.querySelectorAll("a").forEach(( b ) => {
    b.style.borderRadius = "0";
    b.style.borderEndEndRadius = "0";
    b.style.borderEndStartRadius = "0";
    b.style.borderTopLeftRadius = "0";
    b.style.borderTopRightRadius = "0";
    b.style.borderBottomRightRadiusRadius = "0";
    b.style.borderBottomLeftRadiusRadius = "0";
    b.style.borderCollapse = "separate";
});

此代碼獲取 html 文件中的所有按鈕/a(s)，然后循環它們並將borderRadius樣式更改為0“ none ”，您可以測試b.style.backgroundColor = "red"; 它會將 querySelectorAll() 背景顏色中的選定項目更改為紅色。

有關document.querySelectorAll()的更多信息在這里！ 看看這里的Array.prototype.forEach() function ！

Answer 2

我不確定，但我為你做了使用 vanillaJS 的例子，你在尋找這樣的東西嗎？

 function disableRounding(){ var buttons = document.getElementsByTagName('button'); for (let button of buttons) { button.style.borderRadius = 0; }; }; function enableRounding(){ var buttons = document.getElementsByTagName('button'); for (let button of buttons) { button.style.borderRadius = '50%'; }; };

 .round-button { display:block; width:150px; height:50px; line-height:50px; border: 2px solid #f5f5f5; border-radius: 50%; color:#f5f5f5; text-align:center; text-decoration:none; background: #464646; box-shadow: 0 0 3px gray; font-size:20px; font-weight:bold; }.round-button:hover { background: #262626; }

 <button href="http://example.com" class="round-button" onclick="enableRounding()">Enable</button> <button href="http://example.com" class="round-button" onclick="disableRounding()">Disable</button>