如何用js点击class？

JavaScript027

如何用js点击class？,第1张

HTML DOM3提供了getElementsByClassName()方法用以根据类名获取元素，但是IE9以下浏览器并不支持。考虑兼容性，可以采用如下思路：获取元素，判断className属性是否为目标类名，是的话即添加onclick事件。

下面实例演示——点击class为test1的a标签弹出提示框:

1、HTML结构

<div>

<a class="test1" href="#">第一项</a>

<a class="test2" href="#">第二项</a>

</div>

2、javascript代码

window.onload = function(){

var a = document.getElementsByTagName("a")

for(i=0i<a.lengthi++){

if(a[i].className == "test1"){

a[i].onclick = function(){alert(this.innerHTML+"被点击了")}

}

}

}

3、效果演示

//简单的状态模式

<html>

<head><title>updateClass</title>

<style type="text/css">

a{ padding:20pxtext-decoration:none}

.asc{ background-color:#CCCCCC}

.desc{ background-color:#999999}

.asc_enable{ background-color:#FF0000}

.desc_enable{ background-color:#00FF00}

</style>

<script type="text/javascript">

var index = "a2"//当前焦点的ID

var lastEnable = "a1"//上一次为焦点的ID

function updateClass(obj) {

if (obj.id != index) { //点击了非当前焦点的控件

obj.className = "asc_enable"//将当前焦点的控件设为红色

document.getElementById(lastEnable).className = "desc"//上一次为焦点的设为灰色

lastEnable = index//改变上一次的焦点

document.getElementById(index).className = "asc"//原先的当前焦点控件设为淡灰色

index = obj.id//改变当前焦点

} else {//点击了已经为焦点的控件

switch (obj.className) {//改变当前焦点控件的颜色

case "asc_enable":

obj.className = "desc_enable"

break

case "desc_enable":

obj.className = "asc_enable"

break

}

}

}

</script>

</head>

<body>

<div id="sort_top">

<a id="a1" class="asc" href="javascript:void(0)" onclick="updateClass(this)">1</a>

<a id="a2" class="asc_enable" href="javascript:void(0)" onclick="updateClass(this)">2</a>

<a id="a3" class="desc" href="javascript:void(0)" onclick="updateClass(this)">3</a>

<a id="a4" class="desc" href="javascript:void(0)" onclick="updateClass(this)">4</a>

</div>

</body>

</html>

//---------------

href="javascript:void(0)" 代表不执行默认操作，即页面跳转

onclick="updateClass(this)" -------this 代表当前标签控件对象，这里为A标签本身

css中的class 对应 js中的 className 属性