您的位置：首页 > Web前端 > CSS

class 样式的添加,删除，切换【选择器】

2014-07-30 11:57 302 查看

<1>

[html] view plaincopyprint?

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

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

[html] view plaincopyprint?

<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的字体颜色设为蓝色

            $("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>

<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的字体颜色设为蓝色

$("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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

class 样式的添加,删除，切换 【选择器】

class 样式的添加,删除，切换【选择器】