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

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

javascript html css

Javascript 使用列表而不是下拉选择选项,javascript,html,css,Javascript,Html,Css,我需要能够改变一个下拉列表为基础的页面样式。我有一个下拉表单作为选项列表，并使用当前正在页面上从CSS中选择的JS。这需要根据下拉列表项单击/更改下拉列表时应用单独的样式表（style1.css、style2.css等），而不是选择选项 HTML 选项选择 <div class="et-select-wrapper"> <div class="et-select-wrapper" style="margin:0"> <select id="styleS

我需要能够改变一个下拉列表为基础的页面样式。我有一个下拉表单作为选项列表，并使用当前正在页面上从CSS中选择的JS。这需要根据下拉列表项单击/更改下拉列表时应用单独的样式表（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>

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

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

解决方案

我在这里找到了我需要的解决方案：

通过将函数

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：

它从页面上的外部样式表列表中进行选择，我可以从

li

列表中更改选择页面的样式。

您的样式切换程序（UL）没有“更改”事件，当您单击内容时它不会更改-它是一个列表，而不是表单控件。它是页面上的静态元素，如文本或其他内容。而是在LI-s的“单击”事件中绑定switchStyle（）

也可以考虑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>













函数样式开关（x）{
变量颜色=[“蓝色”、“绿色”、“红色”、“紫色”、“橙色”]；
$（“.colorMe”）.css（“背景色”，颜色[--x]）；
}
$（“li>a”）。单击（“click”，函数（）{
var n=$（此）.data（“值”）；
样式切换器（n）；
});

（这也是一个问题）
现在，您可以应用自己的切换样式方法

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













函数样式切换器（t）{
var cssName=“theme.”+t+“.css”；
document.getElementById（“customStyle”）.setAttribute（“href”，cssName）；
}
$（“li>a”）。单击（“click”，函数（）{
var主题=$（this）.data（“值”）；
风格转换（主题）；
});

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

您使用

li

标记而不是

选择？在列表中插入表单元素，例如标签+无线电输入（隐藏或不通过css），它会起作用的。列表本身不是表单；）@rac，我如何重写JS以使用选择选项而不是li列表？马特，我想我可能已经回答了你的问题。@dkellner，我对你的答案的实现有点不确定。我用jquery找到了另一种方法，但它仍然不能正常工作：感谢您朝着正确的方向指导。我需要能够将其应用于下拉列表，并从样式表数组中进行选择，然后将这些样式表应用于页面的标题。以下是您在JSFIDLE中的示例的编辑版本：。想法？你的方法很好-看看这个帖子：@Matt-还有另一个例子的更新。试试看；这一次我不能添加任何东西。将stackoverflow链接中的代码与我自己的代码结合起来，就更接近了。但是，它无法正常工作，无法更改样式表。这是因为您正在为单击事件指定函数结果。这是：“style1.onclick=swapStyleSheet（…）”-表示您正在调用swapStyleSheet，返回的值将进入onclick。现在，用你的代码来修复这件事并不是件小事——试试我的建议怎么样？
<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>