如何使用jquery控制CSS样式,并且取消Css样式

html-css08

如何使用jquery控制CSS样式,并且取消Css样式,第1张

提供思路   :

定义好样式 class

jquery 控制添加class 值

例如:

jquery  给input  添加属性 class=“”

《input  name="" />

正规写法是把这个css样式在CSS里设置成一个class。然后用jquery addClass() removeClass().

一般大规模的css样式修改不要写在js代码里。有利于CSS代码的集中和复用。试想一下如果你在js里设置了很多这种css样式代码,某天你忽然觉得颜色要改一下,那么既难找,全部修改工作量又大。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<style>

.p_style{

color:white

background-color:#98bf21

font-family:Arial

font-size:20px

padding:5px

}

</style>

<script type="text/javascript">

$(document).ready(function(){

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

$("p").addClass("p_style")

})

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

//$("p").unbind(".css")

$("p").removeClass("p_style")

})

})

</script>

</head>

<body>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button id="btn01" type="button">改变段落的样式</button>

<button id="btn02" type="button">恢复段落的样式</button>

</body>

</html>