Changing style on a button

[uworlds]

Hello,

I would be very grateful for any help with this.

Javascript is run on a page which grabs this code from remote and inserts it at the very bottom of the page (see attachment if necessary):

How can I change attributes in the highlighted line, for example override the background value of #000 to be #FFF (especially because I am also not sure how to make any extra code execute after the above code since it's forced to the bottom of the page and not sure how that works).

I have tried a number of approaches from other online forums but have not had success yet.

Thanks so much for any advice you may have!

Kind regards

Edited October 7, 2021 by uworlds
extra explanation

[Ingolme]

Wow, those guys really do not want their styles changed. I would have suggested overriding it with CSS, but they have !important rules inside a style attribute, there really is no way around that without Javascript.

Once you have a reference to the button, you just have to change the style property of the button which is easy. In order to get a reference to the button you have to write some code that is guaranteed to run after the script that loads this HTML, which I don't have enough information about your page to do that.

The code which would get a reference to the button (provided you run it at the right moment) is this:

var button = document.body.lastElementChild.querySelector("button");

// Once you have the button, you can change any of its properties
button.style.backgroundColor = "#FFF";
button.style.color = "#000";

 

[uworlds]

Thanks so much!   I will give that a try and get back to you, it sounds perfect.    Thank you!

[uworlds]

Hi there!

I tried the above, but I have been getting errors about nulls in Chrome Developer Tools, but I must be putting something in the wrong place, are you able to correct me?

After trying a whole range of options, I ended up putting this in, but am still getting those errors:

<script>
        function changeColor() {
            var button = document.body.lastElementChild.querySelector("button");
            button.style.background = "#FFF!important";
            button.style.color = "#000!important";
        }
        changeColor()
    </script>

Any advice would be hugely appreciated.  Kind regards

[Ingolme]

As I said, this code has to run after the other code has generated the HTML and I don't have enough information about your page to determine when that happens. I need to see the whole page to actually identify how the code is being loaded.

At the moment, all I can do is make guesses, so my suggestions are not guaranteed to work, of if they do I can't be certain they'll work 100% of the time because of variable loading times.

My first guess is to run the code after the onload event. This probably won't work because, if the other code is using AJAX to load the content, it may take longer than the full page load time to appear:

window.addEventListener("load", updateButton);
function updateButton() {
  var button = document.body.lastElementChild.querySelector("button");
  button.style.background = "#FFF !important";
  button.style.color = "#000 !important";
}

The catch-all fallback is to just wait a while using setTimeout(). The hard part is deciding how long to wait. If you wait too little, the other code won't have loaded yet; if you wait for too long the buttons will appear visibly unstyled for a period before changing.

// Wait 800 milliseconds and then try to style the button
setTimeout(updateButton, 800);
function updateButton() {
  var button = document.body.lastElementChild.querySelector("button");
  button.style.background = "#FFF !important";
  button.style.color = "#000 !important";
}

By the way, you don't need the "!important" rules because you're deleting the rules that are already in place.

Edited October 9, 2021 by Ingolme

[uworlds]

Hello Ingolme,

Thanks so much again!   You really helped me and I really appreciate it.

What did in the end was use a listener to detect when the page had finished loading, and this worked:

    <script>
        window.addEventListener("load", updateButton);
        function updateButton() {
            $("button").last()[0].style.setProperty("background","white","important");
        }
    </script>

Many thanks!