如何记住样式更改？

有这么多关于cookies和localStorage（设置，删除...）的文章，但是我不清楚我应该在哪里放置一些代码。如何记住样式更改？

即，我试图改变CSS样式表单击一个按钮，但不能保存下一次加载页面的选择。喜欢的东西：

params.php

if (user clicked on "btntheme") { 
    $theme = 'green.css';  
}else{ 
    $theme = "blue.css"; 
};

的index.php

<?php include ("params.php");?> 
<head> 
<link id="link01" rel="stylesheet" href="<?php echo $theme;?>"> 
</head> 

<body> 
<div id="btntheme">THEME</div> 
</body>

$('#btntheme').click(function(){ 
    $('#link01').attr('href', 'green.css'); 
});

这改变了风格，但仅适用于当前会话。我怎么能告诉params.php，以后$theme是green.css，而不是blue.css？

来源

2016-12-23 bonaca

使用本地存储是很容易的。

要设置

localStorage.setItem('theme','green');

要获得

localStorage.getItem('theme');

所以，你可以只使用一个函数从LS获取，然后设置你的样式表。

function changeTheme(){ 
    var theme = localStorage.getItem('theme'); 
    $('#link01').attr('href', theme + '.css'); 
} 

$('#btntheme').click(function(){ 
    localStorage.setItem('theme','green'); 
    changeTheme(); 
});

，你可以直接调用该函数在document.ready函数来设置它在页面加载以及。

来源

2016-12-23 19:14:19 TheValyreanGroup

我treid，它的工作原理，但我看到所有的元素首先用'blue.css'（大约一两秒）的样式，然后出现'green.css'。也许这不会发生使用Cookie，而是？ – bonaca

这可能是因为您使用PHP来回应主题。为什么不在JS中处理它。PHP在页面后加载并运行。 – TheValyreanGroup

您可以使用select元素将localStorage设置为用户选择的值。使用$.holdReady(true)来检查localStorage是否不是null，如果在密钥处设置了值，则设置href为link元素，否则请致电$.holdReady(false)。如果用户没有做出选择，会考虑为link元素设置默认href。

HTML

<!-- set default value at `href` --> 
<link id="link01" rel="stylesheet" href="<?php echo $theme;?>">

<select> 
    <option>Select a theme</option> 
    <option value="green.css">Green Theme</option> 
    <option value="blue.css">Blue Theme</option> 
</select>

的JavaScript

$.holdReady(true); 

if (localStorage.getItem("theme") !== null) { 
    $("#link1").attr("href", localStoage.getItem("theme")) 
} 

$.holdReady(false); 

$(function() { 
    $("select").change(function(e) { 
    $("#link1").attr("href", this.value); 
    localStorage.setItem("theme", this.value); 
    }); 
});

来源

2016-12-23 19:13:37 guest271314

我喜欢它，但它可以工作，但我看到所有元素首先用'blue.css'（大约一两秒）的样式设置，然后出现'green.css'。也许这不会发生使用Cookie，而是？ – bonaca

尝试用''元素替换'

11. 记住未提交的更改

12. 如何更改活动链接样式

13. 如何更改jQuery文本（）的样式？

14. 如何更改Android中的样式

15. 如何更改android的按钮样式

16. 如何更改CheckBox控件的样式

17. 如何更改jqgrid分页样式

18. 如何更改ActionBar中MediaRouteButton的样式？

19. 如何更改SWT中String的样式？

20. 如何更改元素样式颜色

21. 如何动态更改CSS样式

22. 如何更改选项菜单样式

23. 如何更改AlertController的样式Swift 3

24. 如何更改popToRootViewController的转换样式？

25. AngularJS bootstrap ui - 如何更改css样式？

26. 如何更改栅格图层样式

27. 如何更改滚动条样式

28. 如何更改标签样式CMTimeGetSeconds

29. 如何根据值更改css样式

30. 如何更改extjs4中的fieldLabel样式

如何记住样式更改？

回答

相关问题