js按鈕點擊樣式（css按鈕點擊樣式）

本文目錄一覽：

• 1、js怎麼實現三個按鈕點擊那個那個更換樣式
• 2、如何用js模擬點擊class樣式的按鈕
• 3、如何用js里給按鈕改變樣式
• 4、JS 或者Jquery怎麼實現：點擊一個按鈕之後滑鼠樣式改變，然後單擊一次之後變回正常形狀

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模擬點擊class樣式的按鈕

元素選擇： $(“a”).click(function(){}）

類：$(“.tj_btn”).click(function(){}）

如何用js里給按鈕改變樣式

不能直接改，不過可以模擬：

上面就是做個自定義樣式的button，點擊時觸發隱藏的file文本域。

JS 或者Jquery怎麼實現：點擊一個按鈕之後滑鼠樣式改變，然後單擊一次之後變回正常形狀

直接修改元素的cursor屬性呀！例如你要修改body的cursor屬性

$(“button#1”).bind(‘click’,function(){

    if($(“body”).css(‘cursor’)==’crosshair’){

        (“body”).css(‘cursor’,’default’);

    }else{

        (“body”).css(‘cursor’,’crosshair’);

    }

})

然後你要將這個滑鼠樣式應用到哪一個元素上，就修改這個元素的cursor就ok了