jQuery の css() メソッドと attr() メソッドの違い

この記事では、jQuery の css() メソッドと attr() メソッドの違いを主に紹介します。これには、必要な友人が参照できるように共有します。

css( ) :

html コード:

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

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 コード:

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

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

    // 设置p(oBox)上面的width属性为400
    console.log(oBox.attr("width", "400"));
    // 假如是一个不存在的属性，使用这个代码，就会添加这个属性到匹配到的元素上面 ，如oBox.attr("data-width","100px");,使用这个，oBox的Html元素上面就会新增一个data-width的属性 
</script>

attr() はスタイルも設定できます:

htmlコード:

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

jQuery コード:

<script type="text/javascript">
    var oBox = $("#box");
    //这里有一个重置了行内的style样式的现象，background-color不再有效
    oBox.attr("style", "width: 310px;height: 110px");
</script>

概要:

css()
• メソッドはスタイル属性 (スタイルに関連する) を取得/変更します。

attr()
• は get/要素の属性を変更するメソッド (HTML タグに関連)

attr()
• と

  css() は、どちらのインライン スタイルでもスタイルを操作します。

  styleも要素の属性であり、
attr()
• もそれを操作できるため、機能的には

  css()はattr()のサブセットとみなすことができます。

attr()
• オペレーションは文字列を返し、

  css() オペレーションはオブジェクトを返します。

拡張:

prop()

メソッドは、カスタム属性を除く要素自身の属性を取得/変更するメソッドです。

html コード:

8ff673b3b5d119a5bd586bd83c45c70b94b3e26ee717c64999d7867364b1b4a3

jQuery コード:

8019067d09615e43c7904885b5246f0a
    var oBox = $("#box");
    console.log(oBox.prop("style"));// 返回的是所有style的属性和值 包括已经设置的和未设置的
2cacc6d41bbb37262a98f745aa00fbf0

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

JS 文字列を数値に変換する方法

Vue 属性 $route のパラメータを介してパラメータを渡す

jQuery ソース コードのコールバックについて学ぶ

以上がjQuery の css() メソッドと attr() メソッドの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。