改变样式表javascript

Changing Style Sheet javascript

本文关键字：javascript 样式 改变      更新时间：2023-09-26

我得到了这个HTML代码:

<head>
    <script type="application/javascript" src="javascript.js">
    <link id="pagestyle" href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <button id="stylesheet1" > Default Style Sheet </button>
    <button id="stylesheet2" > Dark Style Sheet </button>
</body>

在javascript。js中我得到了这个:

function swapStyleSheet(sheet) {
    document.getElementById("pagestyle").setAttribute("href", sheet);  
}
function initate() {
    var style1 = document.getElementById("stylesheet1");
    var style2 = document.getElementById("stylesheet2");
    style1.onclick = swapStyleSheet("default".css);
    style2.onclick = swapStyleSheet("dark".css);
}
window.onload = initate;

我想在按这个按钮时改变样式表。我不明白为什么它不工作。

一种猜测是缺少.css属性，另一种猜测是onclick不是函数，而是调用函数的结果:

将.css全部设为字符串，并将函数赋值给onclick:

style1.onclick = function () { swapStyleSheet("default.css") };
style2.onclick = function () { swapStyleSheet("dark.css"); };

将"default".css转换为"default.css"。对dark.css.

执行相同操作

onclick将函数作为值。

style1.onclick = function () { swapStyleSheet("default.css") };
style2.onclick = function () { swapStyleSheet("dark.css") }; 

 $('button').click(function() {
   let mainSheet = $('#pageStyle').attr('href');
   if(mainSheet == "default.css")
      $('#pageStyle').attr('href','dark.css');
   else
      $('#pageStyle').attr('href','default.css');
   });

你好，它不会工作，直到你在html中添加onclick="属性所以最终的版本是这样的: 

<head>
    <script type="application/javascript" src="javascript.js">
    <link id="pagestyle" href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <button id="stylesheet1" onclick="initate();"> Default Style Sheet </button>
    <button id="stylesheet2" onclick="onclick="initate();"> Dark Style Sheet </button>
</body>
Javascript文件

function swapStyleSheet(sheet) {
    document.getElementById("pagestyle").setAttribute("href", sheet);  
}
function initate() {
    var style1 = document.getElementById("stylesheet1");
    var style2 = document.getElementById("stylesheet2");
    style1.onclick = swapStyleSheet("default.css");
    style2.onclick = swapStyleSheet("dark.css");
}
相关文章：