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為你的新樣式。