Question

我只是想知道有没有办法将CSS属性从一个页面带到另一个页面。

让我简要介绍一下 - 我有两个网页，名为one.html和two.html。在one.html中有一个名为darkview的按钮。如果用户点击该按钮，则one.html的背景颜色将会改变。

在同一页面中，我有一个链接。当用户点击它时，它将转到第二页（two.html）。但现在的问题是：我在one.html中更改了背景颜色，我希望它也适用于第二页。如何获取该属性并应用于第二页？

Here are a few lines code I have written

（问题可以通过使用JavaScript或jQuery来解决。）

Answer 1

您可以使用localStorage或sessionStorage来保持浏览器级别的设置，也可以在Web服务器上保持当前状态的会话。

Http是stateless，这意味着它无法记住以前的状态或请求，这就是创建会话的原因，或者在客户端，本地存储，sessionStorage甚至cookie。只需将状态保存到localStorage中的变量，然后在pageLoad上检索它。

Answer 2

您可以使用cookie来存储状态，并简单检查cookie是否存在以及值是什么。没有cookie，开关默认。

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);
    }
  }
}

Answer 3

猜猜这有帮助。您可以将会话存储用于临时客户端存储。如果要保留值，可以使用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>

将css属性从一个html页面转到另一个页面

3 个答案: