使用下拉菜单交换 CSS 样式表的特定 JavaScript 函数

Question

我知道之前已经回答过此类问题，但是我必须使用一些提供的 JavaScript 来为我的班级传递作业（使用提供的 JavaScript 非常重要）并且我很难按照提供的说明进行操作让我的样式表按命令交换。

说明如下：

函数 setStyleSource( ) 接受两个参数，一个是要更改的链接元素的 id 属性值的字符串，另一个是要更改的 CSS 文件的文件名或路径加文件名或 URL 的字符串加载。 要在元素上单击加载此样式表并放弃先前的样式表，请调用该元素的 onclick 事件属性的值。

<p class="stylechange" onclick="setStyleSource(‘changeable’, ‘alt2.css’)"> … </p>

这是提供的 JavaScript 代码：

function setStyleSource (linkID, sourceLoc) {
            var theLink = document.getElementById(linkID);
            theLink.href = sourceLoc;
        }

这是我的代码段，包括具有不同 ID 属性的 css 页面以及我尝试按照说明创建 ap 元素，仅使用我的 ID 和 css 链接属性：

<head>      
        <title>CRAFT412 - Info</title>      
        <link href="css/styles1.css" rel="stylesheet" type="text/css" title="s1" id="s1"/>  
        <link href="css/styles2.css" rel="stylesheet" type="text/css" title="s2" id="s2"/>
        <link href="css/styles3.css" rel="stylesheet" type="text/css" title="s3" id="s3"/>      
        <script type="text/javascript" src="CTEC1800-Stylesheets.js"> </script>     
    </head>

<p onclick="setStyleSource('2', 'styles2.css')">style 2</p>

我希望它在下拉菜单上工作，以便您可以在下拉菜单中选择要更改的样式表，但我不确定如何使用提供的 JavaScript 实现这一点，我显然正在做一些事情错了，只是需要一些有关这些说明的帮助。

任何帮助将不胜感激。

Answer 1

看看这个 - 我也评论过了

这是一个可以玩的小提琴

<link href="style1.css" rel="stylesheet" type="text/css" title="s1" id="s1"/>
<select id="mySelect">
  <option value="style1.css">Style1.css</option>
  <option value="style2.css">Style2.css</option>
  <option value="style3.css">Style3.css</option>
</select>

/* the function which changes the src */
function setStyleSource (linkID, sourceLoc) {
  var theLink = document.getElementById(linkID);
  theLink.href = sourceLoc;
  console.log(theLink.href); //* console log to make sure */
}

/* this is a listener to listen for changes on the dropdown */
document.getElementById("mySelect").addEventListener("change", function(){
    var selected = this.options[this.selectedIndex].value; /* the option chosen */
    setStyleSource ("s1", selected)
});

您还可以使用 select 的onchange属性：

这是不需要侦听器的，您只需要：

<select id="mySelect" onchange="setStyleSource ('s1', this.options[this.selectedIndex].value)">
  <option value="style1.css">Style1.css</option>
  <option value="style2.css">Style2.css</option>
  <option value="style3.css">Style3.css</option>
</select>

/* the function which changes the src */
function setStyleSource (linkID, sourceLoc) {
  var theLink = document.getElementById(linkID);
  theLink.href = sourceLoc;
}

使用下拉菜单交换 CSS 样式表的特定 JavaScript 函数

问题描述

1 个解决方案

解决方案1
0 2016-04-23 14:45:59

使用下拉菜单交换 CSS 样式表的特定 JavaScript 函数

问题描述

1 个解决方案

解决方案1 0 2016-04-23 14:45:59

解决方案1
0 2016-04-23 14:45:59