How do I manipulate existing css at runtime

I want to manipulate some html/css at runtime and up until now I’ve only needed to hide and show elements which has worked fine using the following:

this.image_ball_1 = this.misc_ui_div.querySelector('.ball');
this.image_ball_1.display="none";

However, I now need to change the images on certain html elements and things are becoming generally more complicated, so I need to be able to access the css properties at will. I tried the same as above but with something like …

this.image_ball_1.style.color = "#D93600";

…but that just throws an error.

Any ideas?
Thanks

But what if I want to change the background colour, image, font size etc etc.

What error do you get?

Apologies, it was some other bug in my code. I can confirm that these work at least:

this.image_ball_1.style.backgroundColor=“red”;
this.image_ball_1.style.backgroundImage=“url(‘https://i.stack.imgur.com/ZrSlg.jpg’)”;