How to change CSS of one page from another page using JavaScript

Question

I have two web pages:

pageone.html and pagetwo.html

In pageone.html, there is a button with an id of change-color When you click that button, the background color of pagetwo.html is supposed to turn green. But that isn't happening. Can someone help me?

function changeColor() {
  //code

  var pageTwo = 'pagetwo.html';
  pageTwo.style.backgroundColor = "green";
}

<button type="button" id="change-color" onclick="changeColor">Change Background Color</button>

I am not sure what you really mean since pagetwo.html has not been loaded when you are on pageone.html — B001ᛦ
– B001ᛦ, Commented Nov 27, 2018 at 12:14
My idea would be to set the colour value in a cookie and then read and set it on the window focus event — Matt
– Matt, Commented Nov 27, 2018 at 12:15
How are these two pages related? Where is pagetwo.html when pageone.html is displayed? — Aleks G
– Aleks G, Commented Nov 27, 2018 at 12:16
The cookie approach is only possible when he two pages are part of the same website. — Mr Lister
– Mr Lister, Commented Nov 27, 2018 at 12:17

Jeswin Rebil · Accepted Answer · 2018-11-27 12:24:24Z

3

You can try like below

In pageone.html

 window.localStorage.setItem("bg", "")
 function changeColor() {
         window.localStorage.setItem("bg", "green");
 }

In pagetwo.html

<script>
var bg = window.localStorage.getItem("bg");
if(typeof bg!= 'undefined' && bg != ""){
    //Set your background using bg variable
}
</script>

answered Nov 27, 2018 at 12:24

Jeswin Rebil

4601 gold badge7 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sv443 Over a year ago

Yeah, cookies or local storage are probably the only easy ways to achieve this. But also this only applies to the specific user and changing the background color is not visible to other users.

Collectives™ on Stack Overflow

How to change CSS of one page from another page using JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related