Can Javascript be used to randomly generate a pre-defined link color and hover color on the refresh page?

I've never tried myself in javascript, but I just want to know if this is actually possible before I take the time to study the code.

I spent a couple of days looking around the forums trying to use the code already generated from the demo site to see how changing certain properties affects the section as a whole.

My CSS specifies "a: link", "a: active" and "a: visited" as the given color, and a: hover as the complementary color (# 128EED = color, # ED7112 = padding).

I want one of the 8 predefined colors to be randomly selected when any of the pages have loaded, and the additional color of the predefined random color is a: hover color.

Any information would be greatly appreciated before I start trying this.

Thanks and kind.


source to share

2 answers

Yes, you can do it. You can style the element via javascript, you can create multiple classes to color what you need and apply those classes at random, etc. There are many solutions to your problems, but this is very convenient.

Also, it is not a waste of time learning javascript if you are programming on a website. This can lead to a lot of stress on the page that has to go back and forth to the server, and add features that HTML cannot provide, or cannot easily provide.



EDIT: It is not possible to set certain style attributes, including hovering, etc. But there are workarounds to this, one of which is linked in a comment to this answer. I apologize if I misled you.

Maybe! Just use something like this; assuming you have an array called ColorArray, which is an array of arrays (each additional array is a pair of complementary colors):

I'm not sure if the words after .style are accurate, but they should be easy enough to find. I've split it into 5 lines so it's easy to see what's going on, but I'm sure there is a better or more concise way to express this.

// choose a random complementary pair
var pair = ColorArray[Math.floor(Math.random() * CollorArray.length)];

// grab elements and assign them style attributes
document.getElementsByTagName("tag") = pair[0]
document.getElementsByTagName("tag") = pair[0]
document.getElementsByTagName("tag").style.visited = pair[0]

// Your complementary color assignment now:
document.getElementsByTagName("tag").style.hover = pair[1]




All Articles