Style Switcher和Text Resizer结合在一起？

Question

我遇到过各种各样的样式切换器，它们允许您更改样式表(即，浅色、深色、高对比度)，还有各式各样的文本大小转换器，它们允许您调整测试大小(通常有三个A，小、中和大)。

然而，我似乎找不到一个单一的切换器/大小转换器，可以通过允许两者的排列来很好地协同工作。

也就是说，用户可以选择带有小文本的黑色背景，或者带有大文本的黑色背景，等等。我似乎只能在用户可以选择一种或另一种样式(大文本或高对比度，而不是两者的组合)的情况下才能做到这一点。

有没有什么想法可以用在这方面呢？

谢谢,

斯蒂芬

Answer 1

要做到这一点有多容易，还需要做很多关于CSS和Javascript的工作。

文本大小调整程序通常会更改规则，如下所示

body p {
    font-size: 12px;
}

并基于点击增大或减小字体大小。所以(在jQuery中)你需要将一个事件绑定到你的大小调整上，如下所示：

$("#resizer").click(function(){
    $("body p").css("font-size", "18px");
});

显然，你需要改变选择器来匹配你想要调整的东西。这是一种策略。

另一种方法(可能包括您的深色/浅色或其他主题)是使用完全不同的样式表。这可能并不理想:3个字体大小x 3个主题是9个.css文件。呀！这里有一篇很好的文章，我不会在这里重复：

http://www.kelvinluck.com/2006/05/switch-stylesheets-with-jquery/

祝好运!