How can I create a TamperMonkey script that edits an specific element

Question

After searching for hours I finally found how to even edit a element with TamperMonkey but whenever I run that script only the first line works please see the script and help.

document.getElementsByClassName("loginPanelTitle")[0]
.style.display="flex"; //works
.style.opacity="0.5"; //doesn't work
.style.align-items="center"; //doesn't work
.style.padding="4px 8px"; //doesn't work
.style.font-size="24px"; //doesn't work
.style.background-color="#000000"; //doesn't work
.style.border-radius="2px 2px 0 0"; //doesn't work
.style.border-bottom="1px solid #d3d3d3"; //doesn't work

})();

The `;` (semicolon) **ends** a statement. Leave it off of all but the last one. — Pointy, Apr 23 '18 at 12:24
Also things like `align-items` should be spelled `alignItems`. — Pointy, Apr 23 '18 at 12:25
Why not adding those properties in the `loginPanelTitle` class itself or create a new class and add to the element? — Tushar, Apr 23 '18 at 12:27
@לבנימלכה I was trying to customize elements of a web that I don't have admin access to. — Aditya Dave, Apr 23 '18 at 14:16

score 1 · Answer 1 · answered Apr 23 '18 at 12:25

1

Use a variable to store the element reference

var element = document.getElementsByClassName("loginPanelTitle")[0];
element.style.display="flex";
element.style.opacity="0.5";
// etc

Edit: You'll also need to use brackets for border-radius and others that use a dash, or use the camelCase variant of them

element.style["border-radius] = "2px 2px 0 0";

or

element.style.borderRadius = "2px 2px 0 0";

answered Apr 23 '18 at 12:25

Harrison Stemple

101
4

Thank you very much for your solution and explanation ^_^ It is working great now. – Aditya Dave Apr 23 '18 at 14:13
1

i'm glad @AdityaDave - don't forget https://stackoverflow.com/help/someone-answers if this does answer you – Harrison Stemple Apr 23 '18 at 15:13

How can I create a TamperMonkey script that edits an specific element

1 Answers1