php - 如何在按钮单击时切换外部 CSS

Question

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

当用户单击切换按钮时，我想切换外部 CSS。

有5个不同的页面；有：

1. 标题
2. 页脚
3. 主页
4. 联系我们
5. 关于我们

我有 2 个外部样式表：

1. 样式.css
2. 样式1.css

默认加载 style.css。

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

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

CSS 加载在标题上，因此当我单击切换按钮时，我想应用新的style.css.

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

Answer 1

通过做这样的事情：

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

请参阅使用 jQuery 动态应用样式表

演示

Answer 2

请参阅样式表切换器 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>

Answer 3

$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 } ?>

Answer 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);
}

Answer 5

请注意，我在标记中添加了默认样式表，以防用户禁用 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>