JQuery CSS样式控制 学习笔记

2020-05-22 21:57:07易采站长站整理

<button id=”font” type=”button”>点击这里将发生变化</button>
</body></html>

以下是补充测试代码如下

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
<style type=”text/css”>
.test1{
    color:#0C9;}
.test2{
    color:red;}
</style>
<script src=”js/jquery-1.3.2.js”>
</script>
<script type=”text/javascript”>
    $(function(){
             var count = 2;
             $(“#aAdd”).click(function(){
                    $(    “#testDIV”).addClass(“test1”);
                })
             $(“#aRemove”).click(function(){
                    $(    “#testDIV”).removeClass(“test1”);
                })
             $(“#aToggle1”).click(function(){
                    $(    “#testDIV”).toggleClass(“test2”);
                })
             $(“#aToggle2”).click(function(){
                    $(    “#testDIV”).toggleClass(“test2”,count++ % 3 == 0 );
                })
        $(“#aCSS1”).click(function(){
            $(“#testDIV”).css({background:”red”}).css(“color”,”white”);
        })