ホームページ  >  記事  >  ウェブフロントエンド  >  jquery css() と attr() の違いは何ですか

jquery css() と attr() の違いは何ですか

青灯夜游
青灯夜游オリジナル
2021-05-12 17:07:572880ブラウズ

違い: attr() は主に、img の src 属性と alt 属性、リンクの href 属性などの要素 (HTML タグに関連する) の属性を操作しますが、css() は主に要素の属性を操作します。スタイル内の属性 (スタイルに関連する) は、スタイル内の属性です。

jquery css() と attr() の違いは何ですか

このチュートリアルの動作環境: Windows7 システム、jquery1.10.0 バージョン、Dell G3 コンピューター。

jqueryにはattr()とcss()の2つのメソッドがあります。

attrはattributeの略で、ラベル属性を意味します。 css は style で、要素のスタイルを意味します。

jquery attr() メソッド

attr() メソッドは、選択した要素の属性と値を設定または返します。

このメソッドを使用して属性値を返すと、最初に一致した要素の値が返されます。

このメソッドを使用して属性値を設定すると、一致する要素に対して 1 つ以上の属性/値のペアが設定されます。

構文

属性の値を返します:

$(selector).attr(attribute)

属性と値を設定します:

$(selector).attr(attribute,value)

attribute:属性の名前。

value: 属性の値を指定します。

jquery css() メソッド

css() メソッドは、一致した要素の 1 つ以上のスタイル属性を返すか、設定します。

最初に一致した要素の CSS プロパティ値を返します。

注: 値を返すために使用される短縮 CSS プロパティ (「background」や「border」など) はサポートされません。

$(selector).css(name)

名前: 必須。 CSS プロパティの名前を指定します。このパラメータには、任意の CSS プロパティを含めることができます。例えば「色」。

jquery の attr() と css() の違い

jquery の attr() は、属性と値を取得/変更することです。の要素 (HTML タグに関連); css() は、要素 (スタイルに関連) のスタイル属性を取得/変更します。

attr() は主に、img の src 属性と alt 属性、リンクの href 属性などの要素の属性を操作し、

css() はスタイルを変更します。 . 属性はスタイルの属性です。

前者は、a1f02c36ba31691bcfe87b2722de723b の src 属性、3499910bf9dac5ae3c52d5ede7383485 の href 属性、および d5fd7aea971a85678ba271703566ebfd の title 属性を変更できます。ただし、後者は機能せず、スタイル関連の機能のみを変更できます。

つまり、後者は前者のサブセットであり、スタイルの特定の属性に対してのみ動作します。

#例:

HTML

<div style="color:red;font-weight:bold;" id="a" data-id="1" class="mystyle">Hello</div>

Javascript

<script type="text/javascript">
$(function() {
//css()
var color = $("#a").css("color"); //只有一个参数时,是获取div#a的color,返回red
$("#a").css("color", "blue"); //两个参数时,是设置对应的 样式属性,这里是这只文本color为blue
// $("#a").css({"color":"blue","fontWeight":"normal"});//也支持对象形式进行设置样式
//attr()
//获取div#a上面的data-id属性的值;当然,style,class,id这三个都可以获取到,因为这些都是Html元素的 属性
var id = $("#a").attr("data-id");
//$("#a").attr("data-id",2);//设置div#a上面的data-id属性为2,
                //假如是一个不存在的属性,使用这个代码,就会添加这个属性到匹配到的元素上面 
               //如$("#a").attr("data-width","100px");,使用这个,div#aHtml元素上面就会新增一个data-width的属性
});
</script>

概要

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

attr() は要素の属性 (HTML タグに関連します) を取得/変更します) ) メソッド;

attr() と css() は、両方のインライン スタイルのスタイルを操作します。

style も要素の属性であり、attr() もそれを操作できるため、機能的に css() は attr() のサブセットとみなすことができます。

attr() 操作は文字列を返し、css() 操作はオブジェクトを返します。

推奨される関連ビデオ チュートリアル:

jQuery チュートリアル (ビデオ)

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。