class属性操作

Posted on Posted in js
Tips: 本文创建于2014年7月5日,已超过 2 年,内容或图片可能已经失效!

class属性操作

[code lang="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript">
function f1() {
//给div设置class属性
//以下情况两者效果一致
//$("div").attr('class','apple');
//$("div").addClass('apple'); //为div的class属性设置一个值为apple

//以下两行代码,后边的其作用
//【 class = "pear"】
//$("div").attr('class','apple');
//$("div").attr('class','pear');
//以下两行代码可以是的div的class的值存在两个
//【 class="apple pear"】
$("div").addClass('apple');
$("div").addClass('pear');
}

function f2() {
//删除class操作
//两种方式:$().removeAttr('class')、$().removeClass(值);
//$("div").removeAttr('class');//把整个class属性都给删除了

//removeClass可以把class属性信息的其中某个值给删除掉
//$("div").removeClass("apple"); //从class的值里边删除apple的信息
$("div").removeClass("pear");
}

function f3() {
//有就给取消,没有就给设置上
$("div").toggleClass("apple");
}
</script>

<style type="text/css">
.apple {
width: 200px;
height: 150px;
background-color: pink;
}

.pear {
color: red;
font-size: 25px;
}
</style>
</head>

<body>
<h2>class属性快捷操作</h2>
<div>class操作</div>
<input type="button" value="添加class" onclick="f1()" />
<input type="button" value="删除class" onclick="f2()" />
<input type="button" value="开关class" onclick="f3()" />
</body>
</html>
[/code]

» 转载请注明来源:若我若鱼 » class属性操作

Leave a Reply

Your email address will not be published. Required fields are marked *

eighteen − 17 =