How to edit css with javascript?

[Cookiecrumbles222]

Background Color:

<select id="BGColor">

<option value="#FFFFFF">White</option>

<option value="#000000">Black</option>

<option value="#FF0000">Red</option>

<option value="#008800">Green</option>

<option value="#0000FF">Blue</option>

<option value="#F08080">Light Coral</option>

<option value="#ADD8E6">Light Blue</option>

<option value="#90EE90">Light Green</option>

</select>

Hey guys how would I give a user the option to edit the style of a page with javascript? so if I had a select list like this ^^ how would I make javascript change the style depending on what they picked? Thanks for any help!

[minibois]

Keep in mind Java and Javascript are different things and some might get triggered by not calling it by the right name.

 

Either way, this might help:

https://www.w3schools.com/js/js_htmldom_css.asp

Not sure how exactly you want to implement it, but you could add like 8 buttons, each corresponding to a color and when a button is pressed you call a function which changes everything that needs to be changed.

You could make 8 different functions, but it would be better to use parameters: https://www.w3schools.com/js/js_function_parameters.asp

Basically you call a function and give some values together with it that can be used (e.g. you give your button for making the website blue the color code for your desired shade of blue and thus when you call the function you automatically have the correct colorcode in the function).

 

Not sure how serious you are taking this website, but you can consider saving the user's color preference in a cookie so when they revisit your website (or go to another page on the website), it remembers their color choice.

[Cookiecrumbles222]

13 minutes ago, Minibois said:

Keep in mind Java and Javascript are different things and some might get triggered by not calling it by the right name.

 

Either way, this might help:

https://www.w3schools.com/js/js_htmldom_css.asp

Not sure how exactly you want to implement it, but you could add like 8 buttons, each corresponding to a color and when a button is pressed you call a function which changes everything that needs to be changed.

You could make 8 different functions, but it would be better to use parameters: https://www.w3schools.com/js/js_function_parameters.asp

Basically you call a function and give some values together with it that can be used (e.g. you give your button for making the website blue the color code for your desired shade of blue and thus when you call the function you automatically have the correct colorcode in the function).

 

Not sure how serious you are taking this website, but you can consider saving the user's color preference in a cookie so when they revisit your website (or go to another page on the website), it remembers their color choice.

I fixed the title sorry didn't realize thanks for showing me, and here is a pic of the site I created I'm just trying to learn with this website which method would be best? https://gyazo.com/761d382ee8d752a427acac69d67d318c

[Mira Yurizaki]

https://www.w3schools.com/jsref/event_onchange.asp

 

This is probably the thing you're looking for.

[minibois]

3 minutes ago, Cookiecrumbles222 said:

I fixed the title sorry didn't realize thanks for showing me, and here is a pic of the site I created I'm just trying to learn with this website which method would be best? https://gyazo.com/761d382ee8d752a427acac69d67d318c

When the format button is pressed, the function you are calling after that (for example your 'formatThePage' function) should get a couple of parameters with it; the foreground color, background color, font+font size+bold+italic+underline and should make a webpage based upon that.

I am not super well educated in the whole php thing (what you would use for the cookies I believe) but I am sure you can pass this info to there too.

 

Anyways, your calling the function will probably look something like this:

"formatThePage(bgColor, fgColor, fontName, fontSize, boldText,italicText, underlineText);" and your function should take these values and make the webpage according to that.

 

[jnkdsfjkhfd]

here more example

http://welookups.com/js/js_htmldom_css.html