• class 添加样式,删除,开关 【选择】addClass,removeClass,toggleClass


    <1>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="script/jquery-1.11.0.min.js" type="text/javascript"></script>
        <style type="text/css">
            .class1{ color:Red}
            .class2{ font-size:100px}
        </style>
    
        <script type="text/javascript">
            $(function () {
                $("#btn1").click(function () {  //当点击#btn1的时候给#div1加入一个class2的样式
                    $("#div1").addClass("class2")
                })
            })
            $(function () {
                $("#btn2").click(function () {
                    $("#div1").removeClass("class1") //当点击#btn2的时候移除#div1中的class1的样式
                })
            })
    
            $(function () {
                $("#btn3").click(function () {
                    $("#div1").toggleClass("class2") //当点击#btn2的时候就将原来的样式切换到class2样式,再点击#btn2的时候就在class2样式切换到原来的样式
                })
            })
    
    
            $("textarea").attr("class", "class1") //将textarea的样式加入一个 class1 样式
    
            $("textarea").attr("class", "class1 class2") //给textarea加入两个样式一个是class1样式,另外一个是class2样式
           
    
         
        </script>
    </head>
    <body  style=" background:red">
    <div class="class1" id="div1">我是div</div>
    <input type="button" value="加入样式"id="btn1" />
    <input type="button" value="移除样式"id="btn2" />
    <input type="button" value="切换样式"id="btn3" />
    
    <textarea rows="5" cols="10">我是textarea</textarea>
    </body>
    </html>


    <2>

    <head>
        <title></title>
        <script src="Jquery/jquery-1.10.2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $(".btnClass1,.btnClass2").css("background", "red"); //将具有btnClass1。和btnClass2样式的表单的背景颜色设为红色
                $("#b1,#b2").css("color", "blue"); //将id属性为 b1,或者b2的字体颜色设为蓝色,注意选择器是$("#b1,#b2")而不是$("#b1","#b2")
    
                $("input,p").css("color", "yellow"); //将input标签。和p标签的字体颜色设为黄色
    
                $("body *").css("background", "yellow"); //将body以下全部的标签背景颜色设为黄色
            })
            
        </script>
    
    </head>
    <body>
    <input type="button"  value="ok" class="btnClass1" id="b1"/>
    <input type="button"  value="ok" class="btnClass2" id="b2"/>
    <div>1231</div>
    <p>我是p</p>
    </body>
    </html>


  • 相关阅读:
    [060428]事件中的过去时和进行时,没想到是这种区别。
    4月11日,string这差距怎么就这么大呢
    暴一个vs2005的bug
    membership,想说爱你不容易
    4月5日,遇到一个GridView很头疼的问题
    ActiveX控件的打包发布[无证书发布]
    3月14号,oracle的说道多多
    [转载]在SQL Server数据库之间进行数据导入导出,OPENDATASOURCE Virus
    U盘加载,卸载,拔出,插入,WM_DEVICECHANGE,WndProc,DBT_DEVICEARRIVAL,DBT_DEVICEREMOVECOMPLETE Virus
    C#,String.Format,数字格式化输出 ,format Virus
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/4593688.html
Copyright © 2020-2023  润新知