本文目录一览：
- 1、JS点击切换s样式
- 2、js实现单一html页面两套css切换代码
- 3、js怎么实现三个按钮点击那个那个更换样式
- 4、js更换样式
- 5、想用JavaScript实现DIV样式切换
- 6、底部导航作为公共部分怎么进行样式切换js
JS点击切换s样式
style type="text/css"
#mydiv{
width:400px;
height:300px;
border:2px solid gray;
}
.s{
color:red;
font-size:20px;
}
/style
script type="text/javascript"
function clickMe(){
var div=document.getElementById("mydiv");
var className=div.className;
if(className!=""){
div.className="";
}else{
div.className="s";
}
}
/script
div id="mydiv"
这是一个层
/div
input type="button" value="切换样式" onclick="clickMe()" /
js实现单一html页面两套css切换代码
今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果，具体方法如下：
第一步：在连接样式表的元素里定义一个id,例如
复制代码
代码如下:
link
href=”1.css”
rel=”stylesheet”
type=”text/css”
id=”css”
我定义的id是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
这个函数的code可以放在页面的任何地方。
第三步：为改变页面的样式表的连接添加一个函数的触发事件，代码如下：
复制代码
代码如下:
a
href=”#”
onClick=”change(1)”1.css/a
a
href=”#”
onClick=”change(2)”2.css/a
该效果在IE和FF下均测试通过，相信大家看完后因该非常明了，利用这个方法我们可以让浏览者自己选择需要显示的样式表，比如年老者可以选择一个字体较大的样式表。这里需要注意的两点是：
在这个例子中函数名function后面的名字不能为links或者link，如果为links或者link，样式表将不被改变，具体什么原因我也不大清楚，可能是javascript的保留字符。
另外如果是改变整个页面的样式，你需要在样式表文件里定义body的高度为100%
方法二：
第一步：导入两套css文件
复制代码
代码如下:
link
rel="stylesheet"
type="text/css"
title="样式A"
href="css/people1.css"
/
link
rel="alternate
stylesheet"
type="text/css"
title="样式B"
href="css/people2.css"
/
第二步：写切换的js函数
复制代码
代码如下:
script
type="text/javascript"
var
title
=
"样式A";
function
setStyle(){
//只是样式A
和样式B切换
if(title=="样式A"){
title
=
"样式B";
}else{
title
=
"样式A";
}
var
i,links;
//用dom方法获取所有link元素
links
=
document.getElementsByTagName("link");
//判断每个link元素中是否含有style字符串
，用来判断此link元素为样式表link
，同时判断此link是否包含title属性
for(i=0;
links[i];
i++){
if(links[i].getAttribute("rel").indexOf("style")
!=
-1
links[i].getAttribute("title")){
//把所有link设为disabled
links[i].disabled
=
true;
//再来判断title中是否有指定的title字符串
有则把当前的link设为可视
即激活当前的link
if(links[i].getAttribute("title").indexOf(title)
!=
-1){
links[i].disabled
=
false;
//alert("ok");
}
}
}
}
/script
第三步：在html标签中调用切换的js函数
复制代码
代码如下:
a
href="#"
onclick="setStyle();"
1/a
a
href="#"
onclick="setStyle();"2/a
a
href="#"
onclick="setStyle();"3/a
a
href="#"
onclick="setStyle();"4/a
a
href="#"
onclick="setStyle();"5/a
js怎么实现三个按钮点击那个那个更换样式
可以尝试以下操作：
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
titlejs控制按钮样式切换/title
link href="css/my.css" rel="stylesheet"
/head
script type="text/javascript"
//左边按钮的点击事件
window.onload = function(){
var arr = document.getElementsByTagName('button');
for(var i = 0;iarr.length;i++){
arr[i].onclick = function(){
//this是当前激活的按钮，在这里可以写对应的操作
if(this.className == 'btn1'){
this.className = 'btn2';
var name = this.id;
var btn = document.getElementsByClassName('btn2');
for(var j=0;jbtn.length;j++){
if(btn[j].id!=name){
btn[j].className = 'btn1';
}
}
}
}
}
}
/script
body
div id="main" style="margin:auto 0"
!--四个按钮--
div style="margin-top:2em;"
div style="width:20%"button id = "1" type = "button" 按钮1/button/div
div style="width:20%"button id = "2" type = "button" 按钮2/button/div
div style="width:20%"button id = "3" type = "button" 按钮3/button/div
div style="width:20%"button id = "4" type ="button" 按钮4/button/div
/div
/div
/body
/html
js更换样式
script type="text/javascript"for(var i=0;idocument.getElementsByTagName('div').length;i++){if(document.getElementsByTagName('div')[i].className=='div1'){document.getElementsByTagName('div')[i].className='div2';}}/script
想用JavaScript实现DIV样式切换
假设有div元素div id="mydiv" class="css1"，和两个样式: .css1{} .css2{}
(1)移除和添加样式分别是$("mydiv").removeClass("css1") 和$("mydiv").addClass("css1")
(2)如果是换了样式之后，想换回原来的样式，即是切换样式，那么就涉及到一个判断当前样式的问题，此时可以使用方法hasClass()，该方法是判断元素当前是否含有某样式。
(3)所以根据1、2可以实现一个点击切换样式的效果，示例代码如下：
script type="text/javascript"
$("#mydiv").click(function () {
if ($(this).hasClass("css1")) {
$(this).removeClass("css1")
$(this).addClass("css2")
} else if ($(this).hasClass("css")) {
$(this).removeClass("css2")
$(this).addClass("css1")
}
})
/script
(手写不易，望采纳！)
底部导航作为公共部分怎么进行样式切换js
1引入jquery
2$('.className').each(function(index){ $(this).click(function(){ $(this).addClass('style1').siblings().removeClass('style1'); });});
className为你的导航每一项，style1为你的新样式。