js修改class

JavaScript028

js修改class,第1张

你那样写是不行的。

jquery事件是在页面加载时绑定到元素上的,因为你在页面加载时没有.recharge

元素,所以相对于.recharge的click事件就不会被绑定,即使将class替换后,也不会再绑定了,也就是说永远只会发生.li-yuan的click事件。

把你的两个事件合并成如下写法就可以了

$('.li-yuan').click(function(){

        $(this).toggleClass("li-yuan recharge")

})

toggleClass的用法可以看手册了解

js通过class改变样式,可以使用Dom的className属性设置元素的样式。完整示例代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>测试页面</title>

<style type="text/css">

.themeCls {

color: #000

background-color: #f60

line-height: 25px

}

</style>

</head>

<body style="background-color:#ccc">

<span id="theme">这是一段测试文本<br />用来测试js通过class改变样式</span>

<script type="text/javascript">

var domTheme = document.getElementById("theme")

theme.className = "themeCls"

</script>

</body>

</html>

具体操作步骤如下:

1、新建一个html文件,命名为t.html。

2、打开t.html。

3、在t.html中写入html结构代码,其中设置需要添加class类的元素的ID为“theme”。代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>测试页面</title>

</head>

<body style="background-color:#ccc">

<span id="theme">这是一段测试文本<br />用来测试js通过class改变样式</span>

</body>

</html>

4、设置一个css类,命名为”themeCls”,用于在javascript操作时给元素添加clsss。”themeCls”类为了方便观察效果,设置css规则为字体颜色为黑色#000,背景为橙色#f60,行高为25像素。代码如下:

<style type="text/css">

.themeCls {

color: #000

background-color: #f60

line-height: 25px

}

</style>

5、编写javascript代码,获取ID为“theme”的元素并设置元素的class类为“themeCls”,代码如下:

<script type="text/javascript">

var domTheme = document.getElementById("theme")

domTheme .className = "themeCls"

</script>

6、打开浏览器,浏览t.html页面,发现页面中”这是一段测试文本用来测试js通过class改变样式”这一段文本字体颜色呈现黑色,背景呈现橙色,说明我们为元素添加class类“themeCls”成功了。

jquery可以使用attr()或prop()方法修改类名,javascript可以修改对象的className属性,关键代码如下:

$("#test").attr("class","blue")

$("#test").prop("class","blue")

document.getElementById("test").className = "blue"

实例演示如下:

1、HTML结构

<style>

.red{color:red !important}

.blue{color:blue !important}

</style>

<div id="test">我是示例DIV</div>

<input type="button" id="js" value="使用javascript方法修改类名为red">

<input type="button" id="jq" value="使用jquery方法修改类名为blue">

2、jquery代码

$(function(){

$("#jq").click(function() {

$("#test").attr("class","blue")

})

})

window.onload = function(){

document.getElementById("js").onclick = function(){

document.getElementById("test").className = "red"

}

}