Question

我想知道如何制作一个开关样式功能来改变两种风格之间的网站风格。这是我到目前为止所做的。请检查。谢谢。

function switchcss() {
    document.write('<link rel="stylesheet" type"text/css" href="css/style1.css">'); 
    document.write('<link rel="stylesheet" type"text/css" href="css/style2.css">'); 
}

http://jsfiddle.net/APbSm/

Answer 1

您需要了解如何使用JavaScript创建/删除DOM元素，包括link。

请阅读，例如dynamically loading / removing js and css

此外，在大多数情况下使用document.write（）并不是一个好主意。我可以给你写一个完整正确的解决方案，但是没有“通用”通用的几行，如果你必须有一个皮肤切换器，并且需要在将来支持它，那么理解它会更有意义。下面的技术。

Answer 2

有很多方法来皮肤猫，这是一种方法，使用jQuery：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Switch Style Radio Button Using JavaScript</title>

    <link rel="stylesheet" href="css/style1.css" media="all" />
</head>

<body>

<input type="radio" name="switch" id="style1" value="Theme 1" checked="checked" />Theme 1<br />
<input type="radio" name="switch" id="style2" value="Theme 2" />Theme 2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $('#style1').click(function() {
        $('link[rel="stylesheet"]').attr({
            href: 'css/style1.css'
        });
    });

    $('#style2').click(function() {
        $('link[rel="stylesheet"]').attr({
            href: 'css/style2.css'
        });
    });
</script>

</body>
</html>

我意识到这不是最好的方法，但是用尽可能少的代码回答原始海报的问题 - 感谢它可以轻松地复制，粘贴和实现。

然而，对问题的更好理解可以产生更好的解决方案。

Answer 3

这是一个实现。它从this post借用了大部分事件处理程序逻辑。您不应在生产中使用此代码。没有什么比复制和粘贴你不理解的代码更糟糕了。阅读和练习，当您完全理解这些代码时，您将能够编写一个更好的实现，您将能够维护和支持。

<link rel="stylesheet" type="text/css" href="style1.css" id="switch_style"/>

JS的东西：

<script type="text/javascript">
(function(){
  function getEvent (e) {
    if(!e) e = window.event;
    if(e.srcElement) e.target = e.srcElement;
    return e;
  }
  function addEvent (object,type,listener,param) {
    if(object.addEventListener) {
      object.addEventListener(type, 
        function(e){ 
          listener.call(object, e, param);
        }, 
        false );
    } else if(object.attachEvent) {
      object.attachEvent('on'+type, 
        function(e){ 
          e = getEvent(e); 
          listener.call(object, e, param);
        }
      );
    }
  }
  var default_style = 1,
      container = document.getElementById('switch_container'),
      controls = container.childNodes,
      styles = document.getElementById('switch_style');
  function switch_style(event){
    event = getEvent(event);
    s = event.target.getAttribute('value');
    styles.setAttribute('href, 'style' + s + '.css');
  }
  [].map.call(controls, function( e, i, l ){
    if( e.nodeType === 1 && e.getAttribute('type') === 'radio' ) {
      addEvent( e, 'click', switch_style );
    }
  })
  // bind the function to the event handler.
})()
</script>

DOM的东西：

<div id="switch_container">
  <input type="radio" name="switch" value="1"/>style 1<br/>
  <input type="radio" name="switch" value="2"/>style 2<br/>
  <input type="radio" name="switch" value="3"/>style 3<br/>
  <input type="radio" name="switch" value="4"/>style 4<br/>
  <input type="radio" name="switch" value="5"/>style 5<br/>
  <input type="radio" name="switch" value="6"/>style 6<br/>
</div>

JSFIDDLE

Answer 4

此外，最好使用：如果存在多个样式表，则使用first-of-type伪类

<script>
$('#style1').click(function() {
    $('link[rel="stylesheet"]:first-of-type').attr({
        href: 'css/style1.css'
    });
});

$('#style2').click(function() {
    $('link[rel="stylesheet"]:first-of-type').attr({
        href: 'css/style2.css'
    });
});</script>

使用JavaScript切换样式单选按钮

4 个答案: