jQuery中css()和attr()方法的區別

前端肥哥發表於2018-06-29
jQueryCSS

方法介紹：

css():

html程式碼：

<div class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></div>

jQuery程式碼：

<script type="text/javascript">
    var oBox = $("#box");
    // 只有一個引數時,是獲取對應樣式的值
    console.log($("#box").css("width"));// 返回300px

    // 兩個引數時,是設定對應的樣式屬性
    oBox.css("width", "400");
    console.log($("#box").css("width"));// 返回400px
    // 也支援物件形式進行設定樣式
    oBox.css({
        "width": 500,
        "height": "500px",
        "background-color": "yellow"
    });
</script>

attr():

html程式碼：

<div class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></div>
<img src="images/0.jpg" alt="" id="pic">

jQuery程式碼：

<script type="text/javascript">
    var oBox = $("#box");
    var oImg = $("#pic");
    // 一個引數為讀取對應的屬性，屬性的都可以讀取，包括style
    console.log(oImg.attr("id"));// 返回pic
    console.log(oImg.attr("src"));// 返回images/0.jpg

    // 設定div(oBox)上面的width屬性為400
    console.log(oBox.attr("width", "400"));
    // 假如是一個不存在的屬性，使用這個程式碼，就會新增這個屬性到匹配到的元素上面 ，如oBox.attr("data-width","100px");,使用這個，oBox的Html元素上面就會新增一個data-width的屬性 
</script>

attr()同樣可以設定style樣式：

html程式碼：

<div class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></div>

jQuery程式碼：

<script type="text/javascript">
    var oBox = $("#box");
    //這裡有一個重置了行內的style樣式的現象，background-color不再有效
    oBox.attr("style", "width: 310px;height: 110px");
</script>

總結：

  • css()方法是獲取/修改樣式屬性(和style有關)的方法；
  • attr()是獲取/修改元素的屬性(和Html標籤有關)的方法；
  • attr()和css()對style的操作都是針對行內樣式。
  • style也是元素的屬性，attr()同樣可以對他進行操作，所以在功能上css()可以看成是attr()的子集。
  • attr()操作返回的是string，css()操作返回的是object。

擴充:

prop()方法是獲取/修改元素的自有屬性的方法，不包括自定義的屬性。
html程式碼：

<div class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></div>

jQuery程式碼：

<script type="text/javascript">
    var oBox = $("#box");
    console.log(oBox.prop("style"));// 返回的是所有style的屬性和值 包括已經設定的和未設定的
</script>

我是初學者水平有限，如有紕漏歡迎指正，共同學習。

相關文章