我正在尝试用javascript编写样式表交换程序,但无法正常工作。一般的想法是,当我单击按钮时,我会触发该功能,但是当我再次单击它时,我希望能够切换回第一个CSS。您能找到我不起作用的原因吗? 谢谢!
<script type="text/javascript">
function swapStyleSheet(sheet){
document.getElementById('swap').setAttribute('href', sheet);
}
function initate() {
var cont=0;
var style1 = document.getElementById("stylesheet1");
if(cont==0){
style1 = swapStyleSheet("styleH_V2.css");
cont=cont+1;}
else{
style1 = swapStyleSheet("styleH.css");
cont=cont-1;
}
}
</script>
<button id="stylesheet1" onclick="initate();"> Alternative Style Sheet </button>
我第一次单击该按钮实际上会触发该功能并起作用,但是如果我再次单击,则由于该按钮不起作用而无法切换回原始CSS。
答案 0 :(得分:1)
ing 的贡献。 W.K.K.霍夫曼。
首先,我认为您不是在寻找在样式表之间交换的可能性,而是在它们之间进行切换。
在前端开发中有两种更改样式表的常用方法:切换(在两个特定样式表之间切换,或交换(用样式表的无限不同变体之一替换样式表)。
在任何一种情况下,index.html 文件仍将具有对默认样式表的通常引用。当您将标识符添加到对默认样式表的引用时,就会发生奇迹。我在示例中添加了 id=pagestyle。
此标识符允许您通过在 JavaScript 中定位它来更改对具有 id=pagestyle 的默认样式表的引用中的 href 属性值。
对样式表的引用应如下所示:
<link id="pagestyle" rel="stylesheet" type="text/css" href="stylesheet_default.css"/>
以下 JavaScript 文件包含一个名为“swap_stylesheet”的函数和一个名为“target_stylesheet”的容器。这个名为“target_stylesheet”的容器存储了会话期间要使用的样式表的值(样式表的位置和文件名),在单击列表项、href 属性、按钮等之后。
这行代码"document.getElementById("pagestyle").setAttribute("href", target_stylesheet);",定位index.html文件中一个id="pagestyle"的元素,并设置href当 index.html 文件中具有指向名为“swap_stylesheet”的函数的 onclick 属性的元素被点击时,该元素内的属性,其值存储在 target_stylesheet 容器中。
这个带有 onclick 属性的元素,当你点击它时会被触发,在名为“target_stylesheet”的容器中存储一个指定的值(样式表的位置和文件名)。
我的 swap_stylesheet.js 文件如下所示:
// 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>
*/
我的index.html文件如下:
<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文件如下:
/* 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_grayscale.css文件如下:
/* 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文件如下:
/* stylesheet_none.css */
答案 1 :(得分:0)
问题在于您的initate
函数在每次执行时总是将cont
声明为零,因此它将始终进入if(cont==0)
,您可能想声明{{1 }}超出函数范围的变量:
cont
在旁注中,应使用===而不是==来比较数字,以避免内部转换值。另请参见this。