将css属性从一个html页面移动到另一个页面 [英] Taking css property from one html page to another page

问题描述

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

我有一个链接。当用户点击它时，它将转到第二页（ two.html ）。但现在的问题是：我已经改变了one.html的背景颜色，我想要也适用于第二页。那么如何获得该属性并应用于第二页？

这里是我写的几行代码。

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

解决方案

猜猜这有帮助。您可以使用sessionStorage来存储临时clientSide存储。如果要保留值，可以使用localStorage

One.html

 < form> 
< input type =buttonvalue =darkviewid =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> 
  

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

解决方案

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>

这篇关于将css属性从一个html页面移动到另一个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！