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

最新推荐文章于 2024-07-30 10:56:44 发布

weixin_34360651

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量150

点赞数

文章标签： xhtml javascript ViewUI

<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>

weixin_34360651

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
class 添加样式,删除，开关【选择】addClass,removeClass,toggleClass

&lt;1&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="script/jquery-1.11.0.min.js" type="text/javascript"&
复制链接

扫一扫