zoukankan      html  css  js  c++  java
  • 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>


  • 相关阅读:
    方法的重载理解
    JAVA 三种循环的总结
    模拟时间倒计时
    制作漂浮广告效果
    js+css+html实现抽奖小程序
    将系统时间转换为汉字表示的四种方法
    简单的导航栏
    模仿光标闪烁,光标移动,自动切换背景
    sublime插件emmet安装和使用
    现在有一张半径为r的圆桌,其中心位于(x,y),现在他想把圆桌的中心移到(x1,y1)。每次移动一步,都必须在圆桌边缘固定一个点然后将圆桌绕这个点旋转。问最少需要移动几步。
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/4593688.html
Copyright © 2011-2022 走看看