Question

我的页面顶部有一个按钮，可以使用单独的样式表进行打印，我有一个普通的print.css，可以在打印时启用所有内容，而且我有一个acrfprint.css，只打印出某些元素。上周有人在上周使用以下JS给我一些帮助：

<script>
$(document).ready(function(){
    $('#acrf').click(function(){
        $('link').first().removeAttr('href').attr('href', '_includes/css/acrfprint.css');
    });
});
</script>

这很有效，但唯一的问题是按钮并没有真正让你知道acrf-print.css是否已启用或如何禁用它。

基本上我使用的是HTML：

<div id='acrfContaineroff'>
<button id='acrf' class='noPrint noPrint-acrf'>Enable Annotation Print Mode</button>
</div>

（我知道我使用＆＃39;而不是＆＃34;但那是因为它嵌套在VBScript中）

我想要做的是单击按钮时，将样式表更改为acrfprint.css，然后显示以下HTML

<div id='acrfContaineron'>
<button id='acrf' class='noPrint noPrint-acrf'>Disable Annotation Print Mode</button>
</div>

当选择禁用按钮时，我希望css返回print.css

非常感谢任何帮助。

Answer 1

因此，如果您在按钮上单击样式表切换器并相应地更改按钮标签，这可能会有所帮助。

假设：已启用注释打印模式= acrfprint.css

$('#acrf').click(function(){
    var label = "Disable Annotation Print Mode";
    var link = $('#myStylesheet');
    if (link.attr("href").indexOf("acrf") !== -1) {
        link.attr('href', '_includes/css/print.css');
        label = "Enable Annotation Print Mode";
    } else {
        link.attr('href', '_includes/css/acrfprint.css');
    }
    $(this).text(label);
});

HTML：

<div id='acrfContaineron'>
    <button id='acrf' class='noPrint noPrint-acrf'>Disable Annotation Print Mode</button>
</div>

<link id="myStylesheet" rel="stylesheet" type="text/css" href="_includes/css/acrfprint.css" />

演示@ Fiddle

Answer 2

因为您的问题看起来像是刚开始使用javascript .. 也许你应该只是将按钮更改为复选框？

<div id='acrfContaineroff'>
<button id='acrf' class='noPrint noPrint-acrf'>Enable Annotation Print Mode</button>
</div>

成：

<div id='acrfContaineroff'>
<input type='checkbox' id='acrf' /> Enable Annotation Print Mode
</div>

和javascript进入：

<script>
$(document).ready(function(){
    $('#acrf').click(function(){
        if( $('#acrf').is(':checked') ){
            $('link').first().removeAttr('href').attr('href', '_includes/css/acrfprint.css');
        }else{
            $('link').first().removeAttr('href').attr('href', '_includes/css/print.css');
        }
    });
});
</script>

Answer 3

您可以使用以下自己创建的演示：
让我们假设我们在HEAD部分中定义了以下样式表。

<link rel="stylesheet" type="text/css" title="blue" href="http://example.com/css/blue.css">
<link rel="alternate stylesheet" type="text/css" title="pink" href="http://example.com/css/pink.css">

HTML代码为用户提供选择样式表的方式

<form>
    <input type="submit" onclick="switch_style('blue');return false;" name="theme" value="Blue Theme" id="blue">
    <input type="submit" onclick="switch_style('pink');return false;" name="theme" value="Pink Theme" id="pink">
</form>

更改样式表的JavaScript函数

        // *** TO BE CUSTOMISED ***

    var style_cookie_name = "style" ;
    var style_cookie_duration = 30 ;

    // *** END OF CUSTOMISABLE SECTION ***
    // You do not need to customise anything below this line

    function switch_style ( css_title )
    {
        // You may use this script on your site free of charge provided
        // you do not remove this notice or the URL below. Script from
        // http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
        var i, link_tag ;
        for (i = 0, link_tag = document.getElementsByTagName("link") ;
          i < link_tag.length ; i++ ) {
            if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
              link_tag[i].title) {
                link_tag[i].disabled = true ;
                if (link_tag[i].title == css_title) {
                    link_tag[i].disabled = false ;
                }
            }
            set_cookie( style_cookie_name, css_title,
              style_cookie_duration );
        }
    }
    function set_style_from_cookie()
    {
        var css_title = get_cookie( style_cookie_name );
        if (css_title.length) {
            switch_style( css_title );
        }
    }
    function set_cookie ( cookie_name, cookie_value,
        lifespan_in_days, valid_domain )
    {
        // http://www.thesitewizard.com/javascripts/cookies.shtml
        var domain_string = valid_domain ?
                           ("; domain=" + valid_domain) : '' ;
        document.cookie = cookie_name +
                           "=" + encodeURIComponent( cookie_value ) +
                           "; max-age=" + 60 * 60 *
                           24 * lifespan_in_days +
                           "; path=/" + domain_string ;
    }
    function get_cookie ( cookie_name )
    {
        // http://www.thesitewizard.com/javascripts/cookies.shtml
        var cookie_string = document.cookie ;
        if (cookie_string.length != 0) {
            var cookie_value = cookie_string.match (
                            '(^|;)[\s]*' +
                            cookie_name +
                            '=([^;]*)' );
            return decodeURIComponent ( cookie_value[2] ) ;
        }
        return '' ;
    }

您还需要在网页正文标记中添加onload属性：

<body onload="set_style_from_cookie()">

样式表切换器按钮在单击时切换html（jQuery）？

3 个答案: