调整对比度网站的所有文本和背景(对比度交换器)

时间:2014-06-05 03:30:34

标签: javascript jquery html css

我正在建立一个高级友好网站。我在页面顶部添加了一个按钮以删除所有背景颜色并将其更改为白色,然后将所有文本颜色更改为黑色以提供该网站的高级友好/视觉受损视图。基本上试图实现对比度交换器。我尝试编写一个jquery函数来实现这个结果。然而,经过几个小时的工作,我提出的功能过于复杂,并没有提供我希望的结果,因为有很多html元素可以在页面上。有没有简单的方法在jQuery或Javascript中选择所有的HTML元素并应用白色背景和黑色文本?如果有一种方法可以在CSS中做到这一点,那么结果必须是我可以重用的东西。我需要将此功能复制到500多个站点,而无需手动调整每个站点。

3 个答案:

答案 0 :(得分:0)

大多数网页都会在<html>标记上添加一个类。 所以你可以用2级css和1级没有。

示例:http://jsfiddle.net/7RVWG/

答案 1 :(得分:0)

$('html *:not(script, style, noscript)').each(function() {
    $(this).css("background", "none");
    $(this).css("background-color", "yellow");
    $(this).css("color", "black");
    $(this).css("box-shadow", "none");
    $(this).css("text-shadow", "none");
});

我能够使用上面的jQuery代码来完成此操作,而无需修改任何CSS。上面的代码将背景更改为黄色,并将文本颜色更改为白色。您可以修改这些以完成不同的行为,例如,黑色为白色,白色为黑色,黄色为黑色。

答案 2 :(得分:-2)

import java.awt.*;
import javax.swing.*;

public class Test3 implements Icon
{
    public static final int NONE = 0;
    public static final int DECENDING = 1;
    public static final int ASCENDING = 2;

    protected int direction;
    protected int width = 8;
    protected int height = 8;

    public Test3(int direction)
    {
        this.direction = direction;
    }

    public int getIconWidth()
    {
        return width+1;
    }

    public int getIconHeight()
    {
        return height+1;
    }

    public void paintIcon(Component c, Graphics g, int x, int y)
    {
        Color bg = c.getBackground();
        Color light = bg.brighter();
        Color shade = bg.darker();

        int w = width;
        int h = height;
        int m = w / 2;
        if (direction == ASCENDING)
        {
            g.setColor(shade);
            g.drawLine(x, y, x + w, y);
            g.drawLine(x, y, x + m, y + h);
            g.setColor(light);
            g.drawLine(x + w, y, x + m, y + h);
        }
        if (direction == DECENDING)
        {
            g.setColor(shade);
            g.drawLine(x + m, y, x, y + h);
            g.setColor(light);
            g.drawLine(x, y + h, x + w, y + h);
            g.drawLine(x + m, y, x + w, y + h);
        }
    }

    public static void main(String[] args) 
    {
        Test3 t=new Test3(5);
        t.paintIcon(20,10,5,5);
    }
}