使用 JavaScript 切换样式单选按钮

Switch Style Radio Button Using JavaScript

本文关键字：样式 单选按钮 JavaScript 使用      更新时间：2023-09-26

我想知道如何制作切换样式功能以在 2 种样式之间更改网站样式。这是我到目前为止所做的。请检查。谢谢。

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/

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

请阅读，例如动态加载/删除 js 和 css

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

有很多

方法可以给猫剥皮，这里有一种方法，使用 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>

我意识到这不是最好的方法，但用尽可能少的代码回答了原始海报的问题——值得称赞的是，它基本上可以轻松复制、粘贴和实现。

但是，对问题的更深入理解可以产生更好的解决方案。

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

<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>

吉斯菲德尔

此外，最好使用： 如果有多个样式表，则为第一个类型的伪类 

<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>
相关文章：