如何使用javascript和CSS更改网页的主题（多个主题） [英] How to change theme(Multiple theme) of web page using javascript and CSS
问题描述
我想在我的网页中切换多个主题。
我正在使用代码但不工作..
html>
< head>
< link rel =stylesheettype =text / csstitle =blue
href =http://example.com/css/blue.css>
< link rel =alternate stylesheettype =text / csstitle =pink
href =http://example.com/css/pink.css>
< ;脚本类型=文字/ javascript>
// ***定制***
var style_cookie_name =style;
var style_cookie_duration = 30;
function switch_style（css_title）
{
alert（test）
var i，link_tag;
for（i = 0， link_tag = document.getElementsByTagName（link）;
i< link_tag.length; i ++）{
if（（link_tag [i] .rel.indexOf（stylesheet ）！= -1）&&
link_tag [i] .title）{
link_tag [i] .disabled = true;
if（link_tag [i] .title == css_title）{
link_tag [i] .disabled = false;
}
}
set_cookie（style_cookie_name，css_title，
style_cookie_duration）;
}
}
函数set_style_from_cookie（）
{
var css_title = get_cookie（style_cookie_name）;
if（css_title.length）{
switch_style（css_title）;
}
}
函数set_cookie（cookie_name，cookie_value，
lifespan_in_days，valid_domain）
{
var domain_string = valid_domain？
（; domain =+ valid_domain）：'';
document.cookie = cookie_name +
=+ encodeURIComponent（cookie_value）+
; max-age =+ 60 * 60 *
24 * lifespan_in_days +
; path = /+ domain_string;
}
函数get_cookie（cookie_name）
{
var cookie_string = document.cookie;
if（cookie_string.length！= 0）{
var cookie_value = cookie_string.match（
'（^ |;）[\ s] *'+
cookie_name +
'=（[^;] *）'）;
返回decodeURIComponent（cookie_value [2]）;
}
返回'';
}
}
< / script>
< style>
< / style>
< / head>
< body>
< input type =submit önclick=switch_style（'blue'）; return false;name =themevalue =Blue Themeid =blue>
< input type =submitönclick= switch_style（'pink'）; return false;name =themevalue =Pink Themeid =pink&g t;
< / body>
< / html>
参考：如何对做可更换主题 - 使用 - CSS和JavaScript的 [ ^ ]
Hi,
I want to switch between multiple theme in my web page.
I am using code but not working..
html>
<head>
<link rel="stylesheet" type="text/css" title="blue"
href="http://example.com/css/blue.css">
<link rel="alternate stylesheet" type="text/css" title="pink"
href="http://example.com/css/pink.css">
<script type =text/javascript>
// *** TO BE CUSTOMISED ***
var style_cookie_name = "style" ;
var style_cookie_duration = 30 ;
function switch_style ( css_title )
{
alert("test")
var i, link_tag ;
for (i = 0, link_tag = document.getElementsByTagName("link") ;
i < link_tag.length ; i++ ) {
if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
link_tag[i].title) {
link_tag[i].disabled = true ;
if (link_tag[i].title == css_title) {
link_tag[i].disabled = false ;
}
}
set_cookie( style_cookie_name, css_title,
style_cookie_duration );
}
}
function set_style_from_cookie()
{
var css_title = get_cookie( style_cookie_name );
if (css_title.length) {
switch_style( css_title );
}
}
function set_cookie ( cookie_name, cookie_value,
lifespan_in_days, valid_domain )
{
var domain_string = valid_domain ?
("; domain=" + valid_domain) : '' ;
document.cookie = cookie_name +
"=" + encodeURIComponent( cookie_value ) +
"; max-age=" + 60 * 60 *
24 * lifespan_in_days +
"; path=/" + domain_string ;
}
function get_cookie ( cookie_name )
{
var cookie_string = document.cookie ;
if (cookie_string.length != 0) {
var cookie_value = cookie_string.match (
'(^|;)[\s]*' +
cookie_name +
'=([^;]*)' );
return decodeURIComponent ( cookie_value[2] ) ;
}
return '' ;
}
}
</script>
<style>
</style>
</head>
<body>
<input type="submit" önclick="switch_style('blue');return false;" name="theme" value="Blue Theme" id="blue">
<input type="submit" önclick="switch_style('pink');return false;" name="theme" value="Pink Theme" id="pink">
</body>
</html>
Refer: how-to-make-changeable-themes-using-css-and-javascript[^]
这篇关于如何使用javascript和CSS更改网页的主题（多个主题）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
