我正在嘗試使用帶有 Tampermonkey 的用戶腳本來修改網頁上不包含 id 屬性的一些 HTML 元素。
我正在嘗試在一個相對基本的 javascript 語言學習游戲網站上重新啟用一些禁用的按鈕。我將更改樣式屬性，使它們看起來與常規按鈕相同，并更改 onclick 值，以便它們實際啟動游戲而不是什么都不做。
現在，當我對每一個元素使用檢查元素時，我知道如何做這兩件事，并且我已經確認它有效。當我嘗試撰寫用戶腳本來為我執行此操作時，問題就出現了 - 我環顧四周，但似乎找不到解決此問題的方法。
這是我要更改的按鈕之一的代碼：
我想改變這個：
<label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;"> Car Puzzle (2 pts) </label>
對此：
<label onclick="gotoPlayCarPuzzle();" style="width=100%;border:outset;font-size:14px;color:blue;"> Car Puzzle (2 pts) </label>
我敢肯定，如果我能找出如何只為這一個做這件事，我可以很容易地為其他人做這件事。它們幾乎都遵循相同的格式，并且只有其他三個按鈕。
一些可能有幫助的資訊：
- 所有禁用的按鈕都具有相同的樣式屬性。如果有一種方法可以找到具有 style 屬性的元素，那可能就是要走的路。
- 這些按鈕由選單訪問，當與選單外的另一個元素互動時，該選單關閉。每次關閉并重新打開時，按鈕的屬性都會重置。這意味著腳本將需要重復。
提前致謝！
uj5u.com熱心網友回復：
所有禁用的按鈕都具有相同的 style 屬性 如果有一種方法可以找到具有 style 屬性的元素，那可能就是要走的路。
有而且確實存在。您想要querySelectorAll查詢樣式屬性。
let matched = document.querySelectorAll("label[style='border:outset;font-size:14px;background-color:darkgrey;color:white;']");
您還可以潛在地定位onclick屬性：
let matched = document.querySelectorAll("label[onclick='xgotoPlayCarPuzzle();']");
uj5u.com熱心網友回復：
這是我的解決方案：
function xgotoPlayCarPuzzle(event){
let theElement=event.target;
theElement.style.width="100%";
theElement.style.backgroundColor="red";
}<label onclick="xgotoPlayCarPuzzle(event);" style="border:outset;font-size:14px;background-color:darkgrey;color:white;"> Car Puzzle (2 pts) </label>uj5u.com熱心網友回復：
也許你只是想使用標簽選擇器并在獲取元素后修改其屬性。
function playHook() {
alert(1);
}
(function(){
const eles = document.querySelectorAll("body > div > div > label")
eles.forEach(item => {
item.onclick = playHook;
item.style.background = "blue";
})
})();<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Selector</title>
</head>
<body>
<div>
<div>
<label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;"> Car Puzzle (2 pts) </label>
</div>
<div>
<label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;"> Car Puzzle (2 pts) </label>
</div>
<div>
<label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;"> Car Puzzle (2 pts) </label>
</div>
<div>
<label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;"> Car Puzzle (2 pts) </label>
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/354842.html
標籤：javascript html
下一篇：為什么異步函式會阻塞？