CODEWITHSUNDEEP
javascripthtmlcss
naresh kumar
naresh kumar

Reputation: 2241

Taking css property from one html page to another page

I am just wondering is there any way to take a CSS property from one page to another page.

Let me describe briefly - I am have two webpages, called one.html and two.html. In one.html there is a button called darkview. If the user clicks on the button then one.html's background colour will change.

In the same page I have a link. When the user clicks that, it will go to the second page (two.html). But now the problem is: I have changed the background colour in one.html, I want that also apply to second page. So how take that property and apply to the second page?

Here are a few lines code I have written.

(Problem can be solved by using JavaScript or jQuery.)

Upvotes: 2

Views: 354

Answers (3)

Davor Zubak
Davor Zubak

Reputation: 4746

You can use localStorage or sessionStorage to keep settings on browser level, or you can have session on the web server that can keep current state.

Http is stateless, which means that it cannot remember previous state or request, this is why session is created, or on client side, local storage, sessionStorage or even cookies. Simply save state to variable in localStorage and retrieve it on pageLoad.

Upvotes: 2

Tschallacka
Tschallacka

Reputation: 28742

you can use cookies to store the state and simple check if cookie exists and what the value is. Is there no cookie, switch do default.

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}
function checkCookie()
{
var theme=getCookie("theme");
  if (theme!=null && theme!="")
  {
  setTheme(theme);
  }
else 
  {
  theme="light";
  if (theme!=null && theme!="")
    {
    setCookie("theme",theme,365);
    }
  }
}

Upvotes: 1

Akhil Sekharan
Akhil Sekharan

Reputation: 12693

Guess this helps. You can use sessionStorage for temprory clientSide storage. If you want to persist the values, you can uses localStorage

One.html

<form>
     <input type="button" value="darkview" id="newColor"  />
</form>
<script>
window.onload = function() {
    var color = document.getElementById('newColor');
    color.onclick = function() {
        document.body.style.backgroundColor = '#ddd';
        window.sessionStorage['currentColor'] = '#ddd';
    }
}
</script>

Two.html

<script>
window.onload = function() {
    var color = window.sessionStorage['currentColor'];
    document.body.style.backgroundColor = color;
    }
}
</script>

Upvotes: 0

Related Questions