Javascript “如何修复”；交换样式表函数“；在js中
我试图用javascript编写一个样式表交换程序，但它不起作用。一般的想法是，我在单击按钮时触发该函数，但我希望在再次单击时能够切换回中的第一个css。你能帮我找到它不起作用的原因吗？ 谢谢Javascript “如何修复”；交换样式表函数“；在js中,javascript,html,Javascript,Html,我试图用javascript编写一个样式表交换程序，但它不起作用。一般的想法是，我在单击按钮时触发该函数，但我希望在再次单击时能够切换回中的第一个css。你能帮我找到它不起作用的原因吗？ 谢谢 功能交换样式表（表）{ document.getElementById（'swap'）.setAttribute（'href'，sheet）； } 函数初始化（）{ var-cont=0； var style1=document.getElementById（“样式表1”）； 如果（cont==0）{
功能交换样式表（表）{
document.getElementById（'swap'）.setAttribute（'href'，sheet）；
}
函数初始化（）{
var-cont=0；
var style1=document.getElementById（“样式表1”）；
如果（cont==0）{
style1=交换样式表（“styleH_V2.css”）；
cont=cont+1；}
否则{
style1=交换样式表（“styleH.css”）；
cont=cont-1；
}
}
替代样式表
第一次单击按钮时，它实际上会触发函数并起作用，但如果再次单击，我将无法切换回原始css，因为该按钮不起作用。问题是，
initatecont，您可能希望在函数范围之外声明cont
变量：
<script type="text/javascript">
var cont = 0;
....
function initate() { ... }
</script>
var-cont=0；
....
函数initate（）{…}
另一方面，您应该使用===来比较数字，而不是==来避免内部强制转换值。另请参见ing的贡献。W.K.K.霍夫曼。
介绍
首先，我认为您不是在寻找在样式表之间交换的可能性，而是在它们之间切换
在前端开发中，有两种常见的更改样式表的方法，即切换（在两个特定的样式表之间切换）或交换（将样式表替换为无限不同的样式表变体之一）
在这两种情况下，index.html文件仍将具有对默认样式表的常规引用。当您将标识符添加到对默认样式表的引用时，神奇的事情就会发生。我在示例中添加了一个id=pagestyle
此标识符允许您通过在JavaScript中以href属性为目标来更改对id=pagestyle的默认样式表的引用中href属性的值
对样式表的引用应如下所示：
<link id="pagestyle" rel="stylesheet" type="text/css" href="stylesheet_default.css"/>
// swap_stylesheet.js
/*
A JavaScript that allows you, to let the reader change the pagestyle. You can use it to let them switch between different colour modes, or switch between dark/light mode, by different stylesheets for every mode.
*/
function swap_stylesheet(target_stylesheet) {
document.getElementById("pagestyle").setAttribute("href", target_stylesheet);
}
/*
With this JavaScript, you can provide HTML elements with a swap-stylesheet functionality by a onclick attribute. The possibilities are endless, but here are following two of them.
Example 1 - Changing stylesheet by listitems:
<li onclick="swap_stylesheet('stylesheet_default.css')"> Default </li>
<li onclick="swap_stylesheet('stylesheet_grayscale.css')"> Grayscale </li>
<li onclick="swap_stylesheet('stylesheet_grayscale.css')"> Without Style </li>
Example 2 - Changing stylesheet by a href attribute:
<a onclick="swap_stylesheet('stylesheet_default.css')"> Default </a>
<a onclick="swap_stylesheet('stylesheet_grayscale.css')"> Grayscale </a>
<a onclick="swap_stylesheet('stylesheet_none.css')"> Without Style </a>
*/
我的样式表\u grayscale.css文件如下所示：
<DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="stylesheet_default.css"/>
<script type="text/javascript" src="swap_stylesheet.js"> </script>
</head>
<body>
<div class="container wrapper">
<header id="top">
<h1>Welkome to My Homepage</h1>
<p>Use the menu to select different stylesheets</p>
</header>
<div class="wrapper">
<div id="menubar">
<ul id="menulist">
<li class="menuitem" onclick="swap_stylesheet('stylesheet_default.css')"> Default </li>
<li class="menuitem" onclick="swap_stylesheet('stylesheet_grayscale.css')"> Grayscale </li>
<li class="menuitem" onclick="swap_stylesheet('stylesheet_none.css')"> Without Style </li>
</ul>
</div>
<div id="main">
<h1>Same Page Defferent Stylesheets</h1>
<p>
This is a demonstration of how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following links:
<br>
<a onclick="swap_stylesheet('stylesheet_default.css')"> Default </a>,
<a onclick="swap_stylesheet('stylesheet_grayscale.css')"> Grayscale </a>.
</p>
<h2>No Styles</h2>
<p>
This page uses DIV elements to group different sections of the HTML page. Click here to see how the page looks like with no stylesheet:
<br>
<a onclick="swap_stylesheet('stylesheet_none.css')"> Without Style </a>.
</p>
</div>
<aside id="sidebar">
<h3>Side-Bar</h3>
<p>
Lorum ipsum dolor sit amet, consectetuer adipiscing elit, set diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</aside>
</div>
<footer id="bottom">
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi."
</footer>
</div>
</body>
</html>
/* stylesheet_defaulte.css | variables */
:root { --color_1: rgba(255,255,255,1);
--color_2: rgba(246,218,215,1);
--color_3: rgba(209,072,000,1); }
/* stylesheet_defaulte.css */
body { font-family : Arial ;
background-color: var(--color_3) ;
line-height : 20px ; }
.container { min-width : 300px ; }
.wrapper { position : relative ;
overflow : auto ; }
#top { color : var(--color_1) ;
padding : 15px ;
font-size : 30px ;
line-height : 26px ; }
#top h1 { margin : 0 ;
line-height : 50px ; }
#menubar { width : 190px ;
float : right ; }
#main { padding : 10px ;
background-color: var(--color_1) ;
font : 80% Verdana ; }
#main h1, #main h2 { color : var(--color_3) ; }
#sidebar { background-color: var(--color_2) ;
color : var(--color_3) ;
padding : 10px ; }
#bottom { text-align : center ;
padding : 10px ;
font-size : 70% ;
color : var(--color_1) ; }
#menulist { padding : 0 ;
font : 16px verdana ; }
.menuitem { width : 155px ;
background-color: var(--color_3) ;
border : 1px solid var(--color_3);
border-radius : 40px ;
color : var(--color_1) ;
list-style-type : none ;
margin : 10px ;
padding : 5px ;
text-align : center ;
cursor : pointer ; }
.menuitem:nth-child(2) { background-color: var(--color_1) ;
color : var(--color_3) ;
font-weight : bold ; }
.menuitem:hover { background-color: var(--color_1) ;
color : var(--color_3) ; }
a { color : var(--color_3) ;
text-decoration : none ; }
a:hover { text-decoration : underline ; }
/* stylesheet_greyscale.css | variables */
:root { --color_1: rgba(255,255,255,1);
--color_2: rgba(050,050,050,1);
--color_3: rgba(000,000,000,1); }
/* stylesheet_greyscale.css */
body { font-family : Arial ;
background-color: var(--color_3) ;
line-height : 20px ; }
.container { min-width : 300px ; }
.wrapper { position : relative ;
overflow : auto ; }
#top { color : var(--color_1) ;
padding : 15px ;
font-size : 30px ;
line-height : 26px ; }
#top h1 { margin : 0 ;
line-height : 50px ; }
#menubar { width : 190px ;
float : right ; }
#main { padding : 10px ;
background-color: var(--color_1) ;
font : 80% Verdana ; }
#main h1, #main h2 { color : var(--color_3) ; }
#sidebar { background-color: var(--color_2) ;
color : var(--color_3) ;
padding : 10px ; }
#bottom { text-align : center ;
padding : 10px ;
font-size : 70% ;
color : var(--color_1) ; }
#menulist { padding : 0 ;
font : 16px verdana ; }
.menuitem { width : 155px ;
background-color: var(--color_3) ;
border : 1px solid var(--color_3);
border-radius : 40px ;
color : var(--color_1) ;
list-style-type : none ;
margin : 10px ;
padding : 5px ;
text-align : center ;
cursor : pointer ; }
.menuitem:nth-child(2) { background-color: var(--color_1) ;
color : var(--color_3) ;
font-weight : bold ; }
.menuitem:hover { background-color: var(--color_1) ;
color : var(--color_3) ; }
a { color : var(--color_3) ;
text-decoration : none ; }
a:hover { text-decoration : underline ; }
/* stylesheet_none.css */
我的样式表_none.css文件如下：
<DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="stylesheet_default.css"/>
<script type="text/javascript" src="swap_stylesheet.js"> </script>
</head>
<body>
<div class="container wrapper">
<header id="top">
<h1>Welkome to My Homepage</h1>
<p>Use the menu to select different stylesheets</p>
</header>
<div class="wrapper">
<div id="menubar">
<ul id="menulist">
<li class="menuitem" onclick="swap_stylesheet('stylesheet_default.css')"> Default </li>
<li class="menuitem" onclick="swap_stylesheet('stylesheet_grayscale.css')"> Grayscale </li>
<li class="menuitem" onclick="swap_stylesheet('stylesheet_none.css')"> Without Style </li>
</ul>
</div>
<div id="main">
<h1>Same Page Defferent Stylesheets</h1>
<p>
This is a demonstration of how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following links:
<br>
<a onclick="swap_stylesheet('stylesheet_default.css')"> Default </a>,
<a onclick="swap_stylesheet('stylesheet_grayscale.css')"> Grayscale </a>.
</p>
<h2>No Styles</h2>
<p>
This page uses DIV elements to group different sections of the HTML page. Click here to see how the page looks like with no stylesheet:
<br>
<a onclick="swap_stylesheet('stylesheet_none.css')"> Without Style </a>.
</p>
</div>
<aside id="sidebar">
<h3>Side-Bar</h3>
<p>
Lorum ipsum dolor sit amet, consectetuer adipiscing elit, set diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</aside>
</div>
<footer id="bottom">
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi."
</footer>
</div>
</body>
</html>
/* stylesheet_defaulte.css | variables */
:root { --color_1: rgba(255,255,255,1);
--color_2: rgba(246,218,215,1);
--color_3: rgba(209,072,000,1); }
/* stylesheet_defaulte.css */
body { font-family : Arial ;
background-color: var(--color_3) ;
line-height : 20px ; }
.container { min-width : 300px ; }
.wrapper { position : relative ;
overflow : auto ; }
#top { color : var(--color_1) ;
padding : 15px ;
font-size : 30px ;
line-height : 26px ; }
#top h1 { margin : 0 ;
line-height : 50px ; }
#menubar { width : 190px ;
float : right ; }
#main { padding : 10px ;
background-color: var(--color_1) ;
font : 80% Verdana ; }
#main h1, #main h2 { color : var(--color_3) ; }
#sidebar { background-color: var(--color_2) ;
color : var(--color_3) ;
padding : 10px ; }
#bottom { text-align : center ;
padding : 10px ;
font-size : 70% ;
color : var(--color_1) ; }
#menulist { padding : 0 ;
font : 16px verdana ; }
.menuitem { width : 155px ;
background-color: var(--color_3) ;
border : 1px solid var(--color_3);
border-radius : 40px ;
color : var(--color_1) ;
list-style-type : none ;
margin : 10px ;
padding : 5px ;
text-align : center ;
cursor : pointer ; }
.menuitem:nth-child(2) { background-color: var(--color_1) ;
color : var(--color_3) ;
font-weight : bold ; }
.menuitem:hover { background-color: var(--color_1) ;
color : var(--color_3) ; }
a { color : var(--color_3) ;
text-decoration : none ; }
a:hover { text-decoration : underline ; }
/* stylesheet_greyscale.css | variables */
:root { --color_1: rgba(255,255,255,1);
--color_2: rgba(050,050,050,1);
--color_3: rgba(000,000,000,1); }
/* stylesheet_greyscale.css */
body { font-family : Arial ;
background-color: var(--color_3) ;
line-height : 20px ; }
.container { min-width : 300px ; }
.wrapper { position : relative ;
overflow : auto ; }
#top { color : var(--color_1) ;
padding : 15px ;
font-size : 30px ;
line-height : 26px ; }
#top h1 { margin : 0 ;
line-height : 50px ; }
#menubar { width : 190px ;
float : right ; }
#main { padding : 10px ;
background-color: var(--color_1) ;
font : 80% Verdana ; }
#main h1, #main h2 { color : var(--color_3) ; }
#sidebar { background-color: var(--color_2) ;
color : var(--color_3) ;
padding : 10px ; }
#bottom { text-align : center ;
padding : 10px ;
font-size : 70% ;
color : var(--color_1) ; }
#menulist { padding : 0 ;
font : 16px verdana ; }
.menuitem { width : 155px ;
background-color: var(--color_3) ;
border : 1px solid var(--color_3);
border-radius : 40px ;
color : var(--color_1) ;
list-style-type : none ;
margin : 10px ;
padding : 5px ;
text-align : center ;
cursor : pointer ; }
.menuitem:nth-child(2) { background-color: var(--color_1) ;
color : var(--color_3) ;
font-weight : bold ; }
.menuitem:hover { background-color: var(--color_1) ;
color : var(--color_3) ; }
a { color : var(--color_3) ;
text-decoration : none ; }
a:hover { text-decoration : underline ; }
/* stylesheet_none.css */