使用Javascript更改正在使用的CSS文件

时间：2016-02-03 15:19:25

标签： javascript jquery html css

我试图在点击列表时更改页面的CSS。但是，每当我尝试这样做时，浏览器只会将CSS显示为文本，并且实际上并不将其用于页面。看了一堆这里的答案，但无法让任何工作。

<ul>
  <li><a href="character_sheet.php">Character</a></li>
  <li><a href="send_message.php">Send Message</a></li>
  <li><a href="view_messages.php">Messages</a></li>
  <li><a href="view_blog.php">View Blog</a></li>
  <li><a href="history.php">History</a></li>
  <li><a id="test" href="styles.css" rel="stylesheet" type="text/css">Dark Theme</a></li>
  <li><a id="test2" href="styles2.css" rel="stylesheet" type="text/css">Red Theme</a></li>
  <li><a id="test3" href="styles3.css" rel="stylesheet" type="text/css">Light Theme</a></li>
  <li><a href="index.php">Logout</a></li>
</ul>

<script>
$(document).ready(function() {
    $("#test").attr("href", "styles.css");
});​
$(document).ready(function() {
    $("#test2").attr("href", "styles2.css");
});​
$(document).ready(function() {
    $("#test3").attr("href", "styles3.css");
});​
</script>

编辑：

我已经尝试过用户neil所说的事情，但每当我实现以下内容时，我都无法点击列表条目。用手指将光标悬停在链接上时，光标不会变为小手。点击什么都不做。

<li><a class="test" data-src="styles.css">Dark Theme</a></li>
  <li><a class="test" data-src="styles2.css">Red Theme</a></li>
  <li><a class="test" data-src="styles3.css">Light Theme</a></li>
  <li><a href="index.php">Logout</a></li>
</ul>

<script>
$(document).ready(function(){
    $(".test").on('click', function(){
        $('head').append('<link rel="stylesheet" href="' + this.getAttribute('data-src') + '" type="text/css" />');
    });
});
</script>

EDIT2： 我已经实现了另一个用户解决方案仍然无法解决我的问题。如果你打算关注我的帖子，请告诉我为什么至少，我真的想解决这个问题。我的新代码：

<!DOCTYPE html>
<html>
<head>
  <link href="styles.css" rel="stylesheet">
</head>
<body>

<div id="header">
<h1>D20-TABLEKEEPER</h1>
<form action="blurb.php">
    <input type="submit" value="BLURB" size="21">
</form>
</div>


<ul>
  <li><a href="character_sheet.php">Character</a></li>
  <li><a href="send_message.php">Send Message</a></li>
  <li><a href="view_messages.php">Messages</a></li>
  <li><a href="view_blog.php">View Blog</a></li>
  <li><a href="history.php">History</a></li>
  <li><a href="#" class="changeStyles" data-src="styles.css">Dark Theme</a></li>
  <li><a href="#" class="changeStyles2" data-src="styles2.css">Red Theme</a></li>
  <li><a href="#" class="changeStyles3" data-src="styles3.css">Light Theme</a></li>
  <li><a href="index.php">Logout</a></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
        $(document).ready(function(){
                $(".changeStyle").click(function(){
                        var style = $(".changeStyles").attr('data-src');
                        $('head').append('<link href="'+ style +'" rel="stylesheet">');
                });
                $(".changeStyle1").click(function(){
                        var style = $(".changeStyles2").attr('data-src');
                        $('head').append('<link href="'+ style +'" rel="stylesheet">');
                });
                $(".changeStyle1").click(function(){
                        var style = $(".changeStyles3").attr('data-src');
                        $('head').append('<link href="'+ style +'" rel="stylesheet">');
                });
        });
</script>

4 个答案:

答案 0 :(得分：2)

使用jQuery我可以提供没有真正的帮助，但使用vanilla javascript很容易做到。将id分配给原始样式表以便可以轻松定位，使用querySelectorAll标识用于切换css的链接并为每个链接分配一个事件监听器。下面的代码还会将所选值存储在localStorage中，以便用户的选择在页面/会话中保持不变。

假设有三个样式表（所有目录都与当前页面相同，否则需要添加路径）名为styles.css，styles2.css和styles3.css，为简单起见如下：< / p> 

styles.css
----------
html, html *{
    background:red;
    color:white;
}
styles2.css
-----------
html, html *{
    background:blue;
    color:yellow;
}
styles3.css
-----------
html, html *{
    background:green;
    color:orange;
}



<!doctype html>
<html>
    <head>
        <title>css style switcher - no jQuery</title>
            <link id='style' href='styles.css' rel='stylesheet'>

            <script type='text/javascript'>
                function bindEvents(){

                    var css=document.getElementById('style');
                    var col=document.querySelectorAll('a.changeStyle');

                    /* iterate through collection and assign listener */
                    for( var n in col )if( col[n].nodeType==1 ) col[n].onclick=function(e){
                        e.preventDefault();/* prevent jumping to top of page etc */
                        var el=typeof(e.target)!='undefined' ? e.target : e.srcElement;

                        /* assign style attributes */
                        css.href=el.dataset.style;
                        css.rel=el.dataset.rel;
                        css.type=el.dataset.type;

                        /* store reference to style selected in localstorage */
                        localStorage.setItem( 'style', el.dataset.style );
                    };

                    /* if there is a reference to the user's css choice in storage, assign it */
                    if( localStorage.getItem( 'style' )!=null ) css.href=localStorage.getItem( 'style' );
                }

                document.addEventListener( 'DOMContentLoaded', bindEvents, false );
            </script>
    </head>
    <body>
        <ul>
          <li><a href='character_sheet.php'>Character</a></li>
          <li><a href='send_message.php'>Send Message</a></li>
          <li><a href='view_messages.php'>Messages</a></li>
          <li><a href='view_blog.php'>View Blog</a></li>
          <li><a href='history.php'>History</a></li>

          <li><a href='#' class='changeStyle' data-style='styles.css' data-type='text/css' data-rel='stylesheet'>Dark Theme</a></li>
          <li><a href='#' class='changeStyle' data-style='styles2.css' data-type='text/css' data-rel='stylesheet'>Red Theme</a></li>
          <li><a href='#' class='changeStyle' data-style='styles3.css' data-type='text/css' data-rel='stylesheet'>Light Theme</a></li>

          <li><a href='index.php'>Logout</a></li>
        </ul>
    </body>
</html>

答案 1 :(得分：1)

首先，我没有看到你绑定click

的任何地方 
$(document).ready(function(){
    $(".test").on('click', function(){
        $('head').append('<link rel="stylesheet" href="' + this.getAttribute('data-src') + '" type="text/css" />');
    });
});

和你的HTML 

<li><a class="test" data-src="styles.css">Dark Theme</a></li>
<li><a class="test" data-src="styles2.css">Red Theme</a></li>
<li><a class="test" data-src="styles3.css">Light Theme</a></li>

这样，在任何.test点击中，您都会将<link> css附加到head。

答案 2 :(得分：0)

您需要将其添加到页面的head部分。

例如

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

请参阅本教程

http://www.rickardnilsson.net/post/Applying-stylesheets-dynamically-with-jQuery

答案 3 :(得分：0)

我试了一下。而且，它正在发挥作用。

HTML页面 

<html>
    <head>
        <link href="styles.css" rel="stylesheet">
        <title>asd</title>
    </head>
    <body>
        <a class="changeStyle1" data-src="style.css">style1</a> 
        <a class="changeStyle" data-src="style1.css">style1</a>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
                $(".changeStyle").click(function(){
                        var style = $(".changeStyle").attr('data-src');
                        $('head').append('<link href="'+ style +'" rel="stylesheet">');
                });
                $(".changeStyle1").click(function(){
                        var style = $(".changeStyle1").attr('data-src');
                        $('head').append('<link href="'+ style +'" rel="stylesheet">');
                });
        });
        </script>
    </body>
</html>

<强>的style.css 

a {color:red;}

<强> style1.css 

a {color:green;}
相关问题
最新问题