[英]Using javascript to modify an HTML element's style and onclick function without an ID
我正在嘗試使用帶有 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 屬性 如果有一種方法可以找到具有 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();']");
這是我的解決方案：
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>
也許你只是想使用標簽選擇器並在獲取元素后修改其屬性。
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>
使用<a>標記和onclick</a>使用javascript更改頁面元素的樣式<a>？</a>
[英]Changing a page element's style with javascript using the <a> tag and onclick?
如何在沒有使用javascript的id的情況下向html標簽添加onclick事件？
[英]How do I add an onclick event to html tags without id's using javascript?
使用“onclick” function 調用修改 Javascript 中的變量
[英]Using an "onclick" function call to modify a variable in Javascript
如何<button>使用JavaScript函數</button>選擇和修改一組html
[英]How to Select and Modify a group of html<button>'s using JavaScript function
javascript獲取觸發onclick函數的html元素
[英]javascript getting the html element that fired the onclick function
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.