Question

我需要能够根据下拉列表更改页面的样式。我有一个下拉表单作为选项列表，并使用当前从页面上的CSS中选择的JS。这需要根据下拉列表项而不是选项select来单击/更改下拉列表时应用单独的样式表（style1.css，style2.css等）。

HTML

选项选择

<div class="et-select-wrapper">
  <div class="et-select-wrapper" style="margin:0">
     <select id="styleSwitcher">
            <option value="default">Default</option>
            <option value="option2">Option2</option>
        </select>
  </div>
</div>

列出项目 - 需要与列表项目（下方）一起使用上面的选项

列出项目

<button class="et-icon-down-arrow" data-toggle="dropdown"><span class="caret"> 
</span> Page Style</button>
<ul class="dropdown-menu" role="menu" id="styleSwitcher">
  <li><a href="#" value="default">Default</a></li>
  <li><a href="#" value="wcag">WCAG</a></li>
</ul>

的JavaScript

    window.onload = function() {
  function addEvent(obj, type, fn) {
    if (obj.attachEvent) {
      obj['e' + type + fn] = fn;
      obj[type + fn] = function() {
        obj['e' + type + fn](window.event);
      }
      obj.attachEvent('on' + type, obj[type + fn]);
    } else obj.addEventListener(type, fn, false);
  }

  function switchStyles() {
    var selectedOption = this.options[this.selectedIndex],
      className = selectedOption.value;
    document.body.className = className;
  }
  var styleSwitcher = document.getElementById("styleSwitcher");
  addEvent(styleSwitcher, "change", switchStyles);
}

=============================================== ============================

解

我找到了我需要的解决方案：http://test.unintentionallyblank.co.uk/switcher.html

将功能setStyleSheet应用于下拉列表中的li项，如下所示：

<a data-toggle="dropdown"><button class="et-icon-eye"> Style Selector</button>
<ul class="dropdown-menu" role="menu">
  <li><a href="javascript:setStyleSheet('arial')">Arial</a></li>
  <li><a href="javascript:setStyleSheet('open-sans')">Open Sans</a></li>
</ul>

并使用此处的javascript： http://test.unintentionallyblank.co.uk/switcherpart1.js

从页面上的外部样式表列表中进行选择，我可以在li列表中更改选择的页面样式。

Answer 1

您的样式切换器（UL）没有＆＃34;更改＆＃34;单击事物时，它不会更改 - 它是一个列表，而不是表单控件。它是页面上的静态元素，如文本或其他内容。将你的switchStyle（）绑定在＆＃34;点击＆＃34;相反，LI-s事件。

另外，考虑jQuery。它为您节省了大量关于事件的工作：

$("li").on("click",switchStyles);

<强>更新

我已经创建了一个关于如何对LI点击作出反应的最小演示：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
<body>

    <ul>
        <li><a href="#" data-value="1"> Style 1 </a></li>
        <li><a href="#" data-value="2"> Style 2 </a></li>
        <li><a href="#" data-value="3"> Style 3 </a></li>
        <li><a href="#" data-value="4"> Style 4 </a></li>
        <li><a href="#" data-value="5"> Style 5 </a></li>
    </ul>
    <div class="colorMe">
        <br><br><br>
    </div>

    <script>

        function styleSwitcher(x) {
            var colors = ["blue","green","red","purple","orange"];
            $(".colorMe").css("background-color",colors[--x]);
        }


        $("li > a").on("click",function() {

            var n = $(this).data("value");
            styleSwitcher(n);

        });

    </script>

</body>
</html>

（此为Fiddle）
现在，您可以应用自己的切换样式方法。

更新II

这是另一个更改样式表的版本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
<link id="customStyle" rel="stylesheet" href="theme.peace.css">
<body>

    <ul>
        <li><a href="#" data-value="ocean"> Ocean Blue Theme </a></li>
        <li><a href="#" data-value="darko"> Dark Theme </a></li>
        <li><a href="#" data-value="flame"> Flaming Red Theme </a></li>
        <li><a href="#" data-value="peace"> Peaceful Nature Theme </a></li>
        <li><a href="#" data-value="steam"> Steampunk Theme </a></li>
    </ul>
    <div class="colorMe">
        <br><br><br>
    </div>

    <script>

        function styleSwitcher(t) {
            var cssName = "theme."+t+".css";
            document.getElementById("customStyle").setAttribute("href",cssName);  
        }


        $("li > a").on("click",function() {

            var theme = $(this).data("value");
            styleSwitcher(theme);

        });

    </script>

</body>
</html>

确保您必须在正确的目录中正确命名css文件（例如 theme.ocean.css ） - 或者如果您将名称组成部分放在其他位置，则更新名称组成部分。

使用列表而不是选项下拉列表选择

1 个答案: