样式表切换器按钮在单击时切换 html (jQuery)？

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>

（我知道我使用的是 ' 而不是 " 但那是因为它嵌套在 VBScript 中）

我想做的是当按钮被点击时，将样式表更改为acrfprint.css然后显示下面的HTML而不是

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

当禁用按钮被选中时，我想要 css 到 return 到 print.css

如有任何帮助，我们将不胜感激。

Answer 1

您可以使用下面自己创建的演示：
假设我们在 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 为您的用户提供一种方式来选择样式的代码 Sheet

<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 改变样式的函数 Sheets

        // *** 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()">

Answer 2

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

假设：注释打印模式启用 = 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 3

由于您的问题看起来像是刚开始 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>

样式表切换器按钮在单击时切换 html (jQuery)？

Stylesheet switcher button to toggle html when clicked (jQuery)?

html

javascript

css

jquery

stylesheet