如何在按钮单击时切换外部 CSS答案

【问题标题】：How to toggle external CSS on button click如何在按钮单击时切换外部 CSS
【发布时间】：2012-08-29 19:02:49
【问题描述】：

我面临一个问题，我想做这样的事情：

我想在用户点击切换按钮时切换外部 CSS。

有5个不同的页面；有：

标题
页脚
主页
联系我们
关于我们

我有 2 个外部样式表：

style.css
style1.css

默认加载 style.css。

现在，当我点击切换按钮时，style1.css 必须加载，再次点击切换按钮时，style.css 必须加载并且签证诗句。我想做这样的事情。

有没有人对此有想法。请帮帮我！

CSS 加载在标题上，所以当我点击切换按钮时，我想应用新的style.css。

我面临的问题是，当我当时点击任何其他页面时，默认 css 已设置，但在我的情况下，我不希望当用户单击按钮 style1 时默认加载 style.css现在，当用户再次单击按钮时加载 .css style.css 在再次单击时加载 style1.css 并再次加载 style.css 我想做这样的事情，这个更改应该存在于整个主要网站！ thnx 为您提供宝贵的答复，并等待更准确 -

【问题讨论】：

标签： php jquery css magento buttonclick

【解决方案1】：

$url = Mage::helper("core/url")->getCurrentUrl(); // $url contain your current url 

if(!isset($_SESSION['cssfile']) and !isset($_GET['l']))
{
    /*$urlArr = explode("?",$url);
    $tmpUrl = $urlArr[0];
    $tmpUrl .= "?";
    $andP = '';
    $i=1;
    for(;$i<count($urlArr);$i++)
    {
        $tmpUrl .= $andP.$urlArr[$i];
        $andP = '&';
    }
    if($i>1)
        $tmpUrl .= '&l=1';
    else
        $tmpUrl .= 'l=1';*/
    //$urlGet = $tmpUrl;//$url."?l=0";
    $_SESSION['cssfile'] = '1';
}

if(isset($_GET['l']) and $_GET['l']==0)
{
//      $urlGet = $url."?l=1";
    $_SESSION['cssfile'] = '0';
}
else if(isset($_GET['l']) and $_GET['l']==1)
{   
//      $urlGet = $url."?l=1";
    $_SESSION['cssfile'] = '1';
}

if(isset($_SESSION['cssfile']))
{
    $urlArr = explode("?",$url);
    $tmpUrl = $urlArr[0];
    $tmpUrl .= "?";
    $andP = '';
    $found = 0;
    //for($i=1;$i<count($urlArr);$i++)
    foreach($_GET as $key => $val)
    {
        if($key == 'l')
        {
            $found = 1;
            if($val == 1)
                $val = 0;
            else
                $val = 1;
        }
        $tmpUrl .= $andP.$key.'='.$val;
        $andP = '&';
    }
    if($found == 0 && count($_GET)>0)
        if($_SESSION['cssfile'] ==1)
            $tmpUrl .= '&l=0';
        else
            $tmpUrl .= '&l=1';
    else if($found == 0 && count($_GET)==0)
        if($_SESSION['cssfile'] ==1)
            $tmpUrl .= 'l=0';
        else
            $tmpUrl .= 'l=1';
    $urlGet = $tmpUrl;
}

/*if(isset($_SESSION['cssfile']) and $_SESSION['cssfile'] == 'styles1.css' )
{
    $_SESSION['cssfile'] = 'styles.css';
    $_SESSION['cssfile']

}
else
{
    $_SESSION['cssfile'] = 'styles1.css';
}*/
//echo '--'.$_SESSION['cssfile'];
if($_SESSION['cssfile'] ==1){
?>
 <link href="<?php echo  $this->getSkinUrl()?>css/styles1.css" rel="stylesheet" type="text/css"  id="style" />
<?php }else{ ?>
    <link href="<?php echo  $this->getSkinUrl()?>css/styles.css" rel="stylesheet" type="text/css"  id="style"     />
    <?php } ?>

【讨论】：

【解决方案2】：

见Stylesheet Switcher jQuery

<script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript">
        if ($.cookie("css")) {
            $("link").attr("href", $.cookie("css"));
        }
        $(document).ready(function () {
            $("#nav li a").click(function () {
                $("link").attr("href", $(this).attr('rel'));
                $.cookie("css", $(this).attr('rel'), { expires: 365, path: '/' });
                return false;
            });
        });
    </script>
    <ul id="nav">
        <li><a href="#" rel="css/metro.blue.css">Original CSS</a></li>
        <li><a href="#" rel="css/metro.green.css">Larger Text</a></li>
        <li><a href="#" rel="css/metro.red.css">Something Different</a></li>
    </ul>

【讨论】：

【解决方案3】：

请注意，我在标记中添加了默认样式表，以防用户禁用 JS。所以你得到了某种回退。

<!DOCTYPE html>
<html>
    <head>      
        <link rel="stylesheet" href="style1.css">
        <script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
        <script>
            $(function(){   
                $("#change").click(function(){                      
                        $('head link').each(function(){
                            if($(this).attr('rel') == "stylesheet"){
                                if($(this).attr('href') == "style1.css"){
                                    $(this).attr("href","style2.css");
                                } else {
                                    $(this).attr("href","style1.css");
                                }
                            }
                        });
                });
            });
        </script>
    </head>
    <body> 
        <button id="change">Change</button>
    </body>
</html>

【讨论】：

【解决方案4】：

试试这个

$("#btntoggle").click(function(){
          if($("LINK[href*='style.css']").lenght() > 0){
              $("LINK[href*='style.css']").remove();
              addCss(path + "style1.css");
          }else{
              $("LINK[href*='style1.css']").remove();
              addCss(path + "style.css");
         }
});


function addCss(path){
    var headID = $("head").get(0);       
    var newCss = document.createElement('LINK');
    newCss.rel = 'StyleSheet';
    newCss.type = 'text/css';
    newCss.href= path;
    newCss.media = 'screen';
    headID.appendChild(newCss);
}

【讨论】：

【解决方案5】：

通过这样做：

$("a").click(function () {
    $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
});

见Applying stylesheets dynamically with jQuery

DEMO

【讨论】：

您好，我尝试了您的所有代码，但我面临的问题是，当我当时单击任何其他页面时，默认 css 已设置，但在我的情况下，我不想要默认情况下，当用户点击按钮 style1.css 现在加载 style.css 当用户再次点击按钮时加载 style.css 再次点击 style1.css 加载并再次加载 style.css 我想做类似的事情这个和这个变化应该存在于整个主要网站！谢谢您的宝贵回复，等待更准确的回复