【技术分享】WEB前端全栈成长计划(二阶段)-jQuery之DOM进阶篇(2)

学习过了DOM添加和删除元素，搞定HTML元素还是很简单的，但是如果只是操作DOM的HTML元素这是远远不够的，我们也要掌握对CSS的操作方法。本篇就来学习一下如何通过jQuery操作DOM中的CSS样式。

操作CSS类

jQuery有四种方法操作css

• addClass() 向被选中元素中添加一个或多个CSS类

• removeClass() 从被选中元素中删除一个或多个CSS类

• toggleClass() 设置对被选中元素的CSS类,在添加和删除之间切换，添加时存在的CSS类会被删除，删除则相反

• css 设置或获取CSS属性

addClass() removeClass() 使用

示例通过addClass和removeClass对HTML元素增加和删除CSS类，对被选中元素的CLASS进行设置。

<style>
    .myfont{
        font-family:SimSun;
        font-style: normal;
    }
    .red{
        color:red;
        font-style:italic;                
    }
</style>
 
<h2>我是无情的h2</h2>
<p>这h2戏份很足呀</p>
<div>传说中的DIV</div>
<button id="btn1">addClass()</button>
<button id="btn2">removeClass()</button>
 
<script>
    $("#btn1").click(function(){
        $("p,div").addClass("myfont");
        $("p,div").addClass("red");
    });
    $("#btn2").click(function(){
        $("p,div").removeClass("red")
    });
</script>

toggleClass() 使用

示例通过toggleClass 对被选中类HTML元素进行添加和删除CSS类的切换
切换的特点：给HTML元素添加指定CSS类时相同的CSS类会被删除，否则将为HTML元素添加这个CSS类，达到CSS类切换的效果

<style>
    .pink{
        color:pink;
    }
</style>
<p id="p1" class="pink">效果一</p>
<span id="span1" class="pink">效果二</span>
<p id="p2" class="pink">效果三</p>
<p id="p3">效果四</p>
<button id="btn3">toggleClass()</button>
<script>
    $("#btn3").click(function(){
        $("#p1,#p2,#p3,#span1").toggleClass("pink")
    });
</script>

css() 使用

获取CSS属性 语法结构

• css("propertyname");  // 此方法用于获取指定的CSS属性

设置CSS属性 语法结构

• css("propertyname","value");  // 此方法用于单个CSS属性的设置

设置CSS多个属性

• css({"propertyname":"value","propertyname":"value",......})      // 传入CSS属性键值对对象，此方法可以完成多个CSS属性的设置

知识点：无论是设置单个或者多个CSS属性，都是以被选中元素生效的，这里被选中的元素可以是一个也可以是多个。

<style>
    #div1,#div2{
        height:100px;
        width:100px;
        background-color: red;
        color:yellow;
    }
</style>
<div id="div1">我是文本CSS</div></br>
<div id="div2">我是文本CSS</div>
 
<button id="btn4">获取文本颜色CSS</button></br>
<button id="btn5">设置div大小和颜色</button>
<script>
    $("#btn4").click(function(){
        alert($("#div1").css("color"));
    });
    $("#btn5").click(function(){
        $("#div1").css(
            {"width":"200px",
            "height":"200px",
            "background-color": "yellow",
            "color":"black"
            }
        );
    });
</script>

本篇结束后我们掌握了如何使用jQuery操作CSS类，并可以通过CSS()方法获取和设置HTML元素的属性，下一篇也是咱们进阶DOM操作的最后一个章节学习jQuery尺寸。

书山有路勤为径，学海无涯苦作舟!!!

zhoubo

2020.8.9 at home