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.ht

Solution 1:

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.

Solution 2:

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.

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

functiongetCookie(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)
    {
    returnunescape(y);
    }
  }
}
functioncheckCookie()
{
var theme=getCookie("theme");
  if (theme!=null && theme!="")
  {
  setTheme(theme);
  }
else 
  {
  theme="light";
  if (theme!=null && theme!="")
    {
    setCookie("theme",theme,365);
    }
  }
}

Solution 3:

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><inputtype="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>