正文
点击按钮切换css样式,css 点击样式
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
asp在页面按了一个按钮就可以变化CSS样式怎么弄?
用JS实现
script type="text/javascript"
function change(a){
var css=document.getElementById("css");
if (a==1)
css.setAttribute("href","1.css");
if (a==2)
css.setAttribute("href","2.css");
}
/script
a href="#" onClick="change(1)"风格1/a
a href="#" onClick="change(2)"风格2/a
你看看参考资料连接里是改变整站风格的。可以记录到COOKIES里
/* ======= FileName:skinCss.js =======
* Author:Crystal (Feng Fupeng)
* Date:2008-02-24
* Email:8215349[at]qq.com
*/
function GetCookie(sName)
{
var aCookie = document.cookie.split("; ");
for (var i=0; i aCookie.length; i++)
{
var aCrumb = aCookie[i].split("=");
if (sName == aCrumb[0])
{
return aCrumb[1];
}
}
return null;
}
function SetCookie(name, value, time, domain)
{
var expdate = new Date();
var expires = time;
if(expires!=null){
expdate.setTime(expdate.getTime() + ( expires * 1000 ));
expd = "expires="+expdate.toGMTString()+";";
}else
expd = "";
if (domain)
{
domain = "domain="+ domain +"; path=/; ";
}
document.cookie = name + "=" + escape (value) + "; " + expd + domain;
}
var cookieTag = "nd_skin";
var vSkin = GetCookie(cookieTag);
//皮肤撤销初始化皮肤
if(vSkin=="yx_subject0708"){setSkinColor('blue');}
function setSkinColor(vSkinNum)
{
SetCookie( cookieTag, vSkinNum, 60*60*24*30,"");
if(vSkinNum=="yx_subject0708"){vSkinNum="blue";}
document.getElementById("skinCss").href = ""+vSkinNum+".css";
}
if( vSkin vSkin!="Style" )
{
document.getElementById("skinCss").href = ""+vSkin+".css";
}
上面是JS里面代码,函数名字能看的懂吧,包含了换css的路径和初试输出还有cookie的记录,都包含在上面了,解释起来就很多了,相信你应该能看的明白
页面上html代码如下:
link id="skinCss" href="" rel="stylesheet" type="text/css" /
这个注意这个ID,你要换名字也可以,JS里面也要对应的换,至于放哪位置,就不必说了吧
然后还有一段就是你要换样式,那么一定要有触发事件
在body里面可以加上 ol
lispan class="skinPink" onclick="setSkinColor('pink');" title="粉红色"粉红/span/li
lispan class="skinBlue" onclick="setSkinColor('blue');" title="蓝色"蓝/span/li
lispan class="skinRed" onclick="setSkinColor('red');" title="红色"红/span/li
lispan class="skinGreen" onclick="setSkinColor('green');" title="绿色"绿/span/li
lispan class="skinPeagreen" onclick="setSkinColor('peagreen');" title="淡绿色"淡绿/span/li
lispan class="skinOrange" onclick="setSkinColor('orange');" title="橙色"橙/span/li
lispan class="skinPurple" onclick="setSkinColor('purple');" title="紫色"紫/span/li
lia href=javascript:homePage();设为首页/a/li
/ol
相关问答
Q1: 一个按钮切换两个css样式
按钮绑定一个点击事件，只是改变少量的样式使用$(".div").css("background","red");即可，如果是整个页面改变，就需要用到页面样式写缓存或数据库，重新加载页面来判断用户选择了那个样式，然后显示不同的样式加载
Q2: 点击按钮 调用不同的CSS 我的意思是 网站用两个CSS，默认打开是CSS1 点击按钮变成CSS2
想你这样有好几种方法
比较简单的是get传值
?php
if(array_key_exists('css',$_GET)){
$css=$_GET['css'];
}else{
$css='1';
}
?
!doctype html
html
head
meta charset="utf-8"
title/title
link rel="stylesheet" href="?php echo $css; ?.css"
/head
body
a href="?php echo $_SERVER['PHP_SELF']; ??css=1"css1/a
a href="?php echo $_SERVER['PHP_SELF']; ??css=2"css2/a
/body
/html
Q3: 请问怎样转换CSS样式
楼主说的应该是更换网页皮肤吧。关键代码在这里：
link
href="style_change/black/sty_black.css"
rel="stylesheet"
type="text/css"
id="ch_css"
/
点击某个按钮的时候，用JS获取link标签的id，即获取这个link对象，然后通过JS更换href链接到另一个CSS样式表，达到换肤的目的。
Q4: 在asp.net中 点击button 怎么会改变 页面的css样式呢?
不是button的 原因 代码我测试 过了 不知道你的浏览器是什么 不过 css怎么变化了 是 页面的样式变了么？ 如果是 ：
我分析如下
1、你的电脑是 是不是装了什么 主题之类的 有时候有影响 我之前就是的
2、检查浏览器是不是有问题 或者用别的浏览器 调试一下
3、考虑一下CSS代码的 兼容性问题 CSS在各个浏览器的解析不一样
我推荐 使用 火狐 和 IE各版本兼容器(包含 IE5 IE6 IE7 IE8 必须装IE8才可以) 然后调试一下
Q5: JavaScript 怎么点击按钮修改css样式
style
.myBtn{width:90px;height:60px;font-size:20px;font-family:'微软雅黑';border:1px solid #ccc}
/style
body
button class = 'myBtn'按钮/button
/body
