js的切换样式,js更改样式

本文目录一览：

• 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为你的新样式。