如何通过本地存储更改css [英] how to change css through local storage

问题描述

嗨大家好，



我正在建立一个门户网站，它有两个选项作为链接 -

1）高对比度颜色

2）重置为默认值

为此我制作了两个css--一个用于默认颜色，另一个用于高对比度颜色。

我想要什么时候用户点击选项将适用于所有页面的任何选项，直到他退出或单击其他选项。

任何人都可以告诉我如何实现这一目标。

我只是在寻找html的本地存储内容，但我没有得到如何实现它。在此先感谢。

htmlcode-

高对比度

重置为默认颜色

功能changeColors（newCSS）

{

document.getElementById（currentCSS）。href = newCSS;

}

Hi Guys,

I am working on a portal which has two option as links-
1) high contrast color
2) reset to default
For this I have made two css-- one for default colors and other for high contrast colors.
I want when a user click on any option that option will work for all the pages till he either logs out or click the other option.
Can anyone tell me how can I achieve this.
I am just looking for the local storage stuff of html, but I am not getting how to implement it. Thanks in advance.
htmlcode-

High Contrast

Reset to default colors

function changeColors(newCSS)
{
document.getElementById("currentCSS").href = newCSS;
}

推荐答案

以及它如何与本地存储或会话相关？







实际上，在OP提出了仅使用客户端技术将样式切换应用于其他页面的有效且实际上重要的问题之后，我可以看到使用相应HTML5功能的本地和/或会话存储可以非常有用。请参阅评论中的讨论。如果需要，我会写一些原型来说明我建议的技术，但这需要更多的时间。我希望这个想法很容易从下面评论部分的评论中理解。



在本地和会话HTML5存储之间选择一个问题。本地存储将长时间保持所选样式切换（直到用户清理本地数据，该过程取决于特定浏览器），但会话存储将仅在会话期间记住它，因此您应该注意从默认开始是会话数据丢失。



[结束编辑＃2]



它应该是一个纯粹的客户问题，非常简单。拥有所有CSS类的不同集合，默认和高对比度。如果它们不在不同的CSS文件中（或者CSS全部嵌入HTML中）并不重要，只需给它们不同的名称。



用户的单击，在Javascript中处理它并将所有默认类替换为高对比度类，反之亦然，对于所涉及的所有元素。我认为实现这个的最方便的方法是jQuery。它已经拥有了您需要的所有方法，并且它还允许获取整个元素集并立即对集合执行某些操作。可以使用jQuery 选择器获取元素或一组元素的jQuery包装器：按名称，id，HTML元素和/或属性，这些的不同组合等：

http://api.jquery.com/category/selectors [ ^ ]。



要替换/添加/删除CSS类，使用以下函数：

http://api.jquery.com/category/css [ ^ ]，

http://api.jquery.com/addClass/ [ ^ ]，

http://api.jquery.com/removeClass/ [ ^ ]，

http://api.jquery.com/toggleClass/ [ ^ ]。



如果您需要学习jQuery（强烈推荐），请参阅：

http ：//en.wikipedia.org/wiki/JQuery [ ^ ]，

http://jquery.com [ ^ ]，

http： //learn.jquery.com [ ^ ]，
http://learn.jquery.com/using-jquery-core [ ^ ]，

http://learn.jquery.com/about-jquery/how-jquery-works [ ^ ]（从这里开始）。







描述的解决方案比实际情况更复杂。

当我试图开发它，我发现了更简单，更优雅的解决方案。

这是我的短文中显示的实现，包括用法示例：基于HTML5本地/会话存储的主题选择器：最简单的可思考的 [ ^ ]。



[结束编辑＃4]







替代方案，可能更简单，更维护nable解决方案可以基于一些服务器端技术。您可以将用户单击的HTTP请求回发到服务器端。页面可以在服务器端重写，只有一个区别：一个CSS文件被另一个CSS文件替换，这可能只是HTML代码中的一行引用外部实体（CSS文件）。



它不会像纯客户端Javascript解决方案那么快，但这种交换机很难做得太频繁。作为回报，可维护性可以得到改善。



太糟糕了，我们不知道你使用什么服务器端技术，如果你使用任何技术。因此，您可以使用这个想法来弄清楚如何使用您的技术（再次，如果您使用任何技术）。如果您想获得有关此选项的更多帮助，请澄清此事并询问您的后续问题。

我在上面提到的文章中显示的解决方案使客户端解决方案以非常简单的方式完全相同：

基于HTML5本地/会话存储的主题选择：最简单的可思考者 [ ^ ]。



唯一的问题是客户端应该有相对现代的Web浏览器支持Web存储，但这根本不是问题，因为这个功能甚至不再是HTML5功能;甚至Web浏览器都不能支持HTML5支持Web存储。



[END EDIT＃1.2]

[END EDIT＃1]

-SA

And how this can be related to local storage or sessions?



Actually, after OP raised the valid and practically important problem of applying style switch to other pages using only the client-side techniques, I can see that local and/or session storage using respective HTML5 feature could be extremely useful. Please see the discussion in comments. If needed, I would write some prototype illustrating the technique I suggested, but it would take more time. I hope the idea is easy to understand from my comment in the comment section below.

One issue it to choose between local and session HTML5 storage. Local storage will keep the chosen style switch for a long time (until the user cleans up local data, the procedure depending on particular browser), but the session storage will remember it only during the session, so you should take care to start with default is session data is missing.

[END EDIT #2]

It should be a purely client-side issue, very simple. Have different sets of all CSS classes, default and high-contrast. It does not matter if they are in different CSS files on not (or CSS is all embedded in HTML), it's only important to give them different names.

On user's click, handle it in Javascript and replace all default classes with high-contrast classes, or visa versa, for all elements involved. I think the most convenient way to implement this would be jQuery. It already has all methods you need, and also it allows to get the whole set of elements and do some operation on the set at once. The jQuery wrapper for the element or a set of elements can be obtained using jQuery selectors: by name, id, HTML elements and/or attributes, different combinations of those, and the like:
http://api.jquery.com/category/selectors[^].

To replace/add/remove CSS classes, use these functions:
http://api.jquery.com/category/css[^],
http://api.jquery.com/addClass/[^],
http://api.jquery.com/removeClass/[^],
http://api.jquery.com/toggleClass/[^].

If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com[^],
http://learn.jquery.com[^],
http://learn.jquery.com/using-jquery-core[^],
http://learn.jquery.com/about-jquery/how-jquery-works[^] (start from here).



The solution described about turned out more complicated than it can be.
When I tried to develop it, I found much simpler and more elegant solution.
Here is the implementation shown in my short article, complete with usage sample: Theme Selector Based on HTML5 Local/Session Storage: The Simplest Thinkable One[^].

[END EDIT #4]



Alternative, potentially simpler and more maintainable solutions could be based on some server-side technology. You could post-back an HTTP request on user's click to the server side. The page can be re-written on the server side with only one difference: one CSS file replaced with another CSS file, which could be just one line in HTML code referring to an external entity (CSS file).

It would not be as fast as with pure client-side Javascript solution, but such switches are hardly done too frequently. In return, maintainability could be improved.

Too bad we don't know what server-side technology you use and if you even use any. So, you can use this idea to figure out yourself how to do it with your technology (again, if you use any). If you want to get more help on this option, clarify this matter and ask your follow-up questions.

My solution shown in the article I already mentioned makes the client-side solution doing exactly the same, in a very simple way:
Theme Selector Based on HTML5 Local/Session Storage: The Simplest Thinkable One[^].

The only problem is that the client should have relatively modern Web browser supporting Web storage, but this is not a problem at all, because this feature is not even an HTML5 feature anymore; even the Web browser poorly supporting HTML5 support Web storage.

[END EDIT #1.2]

[END EDIT #1]

—SA

或者，考虑一下：

http://learn.jquery.com/jquery-ui/theming [ ^ ]，

http： //jqueryui.com/themeroller [ ^ ]。

-SA

Alternatively, consider this:
http://learn.jquery.com/jquery-ui/theming[^],
http://jqueryui.com/themeroller[^].

—SA

这篇关于如何通过本地存储更改css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！