Estoy tratando de usar el script de usuario con Tampermonkey para modificar algunos elementos HTML en una página web que no contiene atributos de identificación.
Estoy tratando de volver a habilitar algunos botones deshabilitados en un sitio de juegos de aprendizaje de idiomas javascript relativamente básico. Cambiaré el atributo de estilo para que tengan el mismo aspecto que los botones normales y cambiaré el valor de onclick para que realmente inicien el juego en lugar de no hacer nada.
Ahora, sé cómo hacer ambas cosas cuando uso el elemento de inspección en cada uno, y he confirmado que funciona. El problema surge cuando trato de escribir un script de usuario para hacer eso por mí: he buscado y parece que no puedo encontrar una solución al problema.
Aquí está el código de uno de los botones que quiero cambiar:
Quiero cambiar esto:
<label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;"> Car Puzzle (2 pts) </label>A esto:
<label onclick="gotoPlayCarPuzzle();" style="width=100%;border:outset;font-size:14px;color:blue;"> Car Puzzle (2 pts) </label>Estoy seguro de que si pudiera averiguar cómo hacerlo solo para este, podría hacerlo para los demás con bastante facilidad. Casi todos siguen el mismo formato, y solo hay otros tres botones.
Algunos datos que podrían ayudar:
¡Gracias por adelantado!
Todos los botones deshabilitados tienen el mismo atributo de estilo. Si hay una manera de encontrar elementos con el atributo de estilo, esa sería probablemente la forma de hacerlo.
Hay y es. Desea un querySelectorAll consultando el atributo de estilo.
let matched = document.querySelectorAll("label[style='border:outset;font-size:14px;background-color:darkgrey;color:white;']"); También podría apuntar potencialmente al atributo onclick :
let matched = document.querySelectorAll("label[onclick='xgotoPlayCarPuzzle();']");Aquí está mi solución:
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>Tal vez solo quiera usar el selector de etiquetas y modificar sus atributos después de obtener el elemento.
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>