Question

我正在使用JavaScript为不同类型的可访问选项选择不同的CSS样式，例如。黑色白色文本，更大的文本..我遇到的问题是当你更改CSS表时，它使用以前选择的表中的元素。通过查看网站here（在IE中无法正确显示），您可以更清楚地看到我的意思。如果单击不同的[Aa]选项，则可以更改样式。我正在使用此代码（JavaScript）执行此操作：

if ($.cookie("css")) {
    $("link").attr("href", $.cookie("css"));
}
$(document).ready(function() {
    $("#accessibility a").click(function() {
        $("link").attr("href", $(this).attr('rel'));
        $.cookie("css", $(this).attr('rel'), {
            expires: 365,
            path: '/'
        });
        return false;
    });
});

和HTML：

<a href="#" rel="index.css"><img src="images/bonw.png"></a>
<a href="#" rel="index_wonb.css"><img src="images/wonb.png"></a>
<a href="#" rel="index_+.css"><img src="images/+.png"></a>

我不知道为什么会这样做，任何帮助都会很棒!!

Answer 1

您可以在一个页面上使用多个css表，添加一个css页面而不是选择一个新页面。尝试使用新的css重新加载页面。

Answer 2

你可以做“身体ids”

您将一个类或一个id附加到正文，以告诉页面您想要哪种类型的样式。然后在你的css中，你为那张表格中与其风格相对应的每个选择器贴上了身体。[class]或body＃[id]。

in this example，我只是通过更改正文中的类来切换两种样式之间的文本。

HTML

<!--initial style red-->
<body class="red">
    <div>click anywhere to toggle styles</div>
</body>

CSS

/*on one sheet, you can define the page's CSS when the body is red*/
body.red div{
    color:red;
}

/*on another sheet, different when the body is blue*/
body.blue div{
    color:blue;
}

JS

$(function() {

    var $body = $('body');

    $body.on('click', function() {

        //we toggle the body class, effectively toggling between sheets
        if ($body.hasClass('red')) {
            $body.removeClass('red');
            $body.addClass('blue');
        } else {
            $body.addClass('red');
            $body.removeClass('blue');
        }

    });

});

Answer 3

查看jQuery toggleClass（）http://api.jquery.com/toggleClass/ 它可以减少代码数量并使其更清晰。

  $body.toggleClass('red');
  $body.toggleClass('blue');

显示网页时正在使用两种或更多CSS样式

3 个答案:

HTML

CSS

JS