Quelle est la différence entre jquery css() et attr()

Différence : attr() opère principalement sur les attributs des éléments (liés aux balises Html), comme l'attribut src et l'attribut alt d'img, l'attribut href d'un lien, etc.; modifie Les attributs du style (liés au style) sont les attributs du style.

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.0, ordinateur Dell G3.

Il existe deux méthodes dans jquery : attr() et css() :

attr est l'abréviation d'attribut, qui signifie attribut d'étiquette. css est style, ce qui signifie le style de l'élément.

Méthode jquery attr()

La méthode attr() définit ou renvoie les attributs et les valeurs de l'élément sélectionné.

Lorsque cette méthode est utilisée pour renvoyer une valeur d'attribut, la valeur du premier élément correspondant est renvoyée.

Lorsque cette méthode est utilisée pour définir des valeurs d'attribut, une ou plusieurs paires attribut/valeur sont définies pour l'élément correspondant.

Syntaxe

Renvoyer la valeur de l'attribut :

$(selector).attr(attribute)

Définir l'attribut et la valeur :

$(selector).attr(attribute,value)

attribut : Spécifie l'attribut nom de l'attribut.

valeur : précise la valeur de l'attribut.

Méthode jquery css()

La méthode css() renvoie ou définit un ou plusieurs attributs de style de l'élément correspondant.

Renvoie la valeur de la propriété CSS du premier élément correspondant.

Remarque : les propriétés CSS abrégées (telles que "background" et "border") ne sont pas prises en charge lorsqu'elles sont utilisées pour renvoyer une valeur.

$(selector).css(name)

nom : obligatoire. Spécifie le nom de la propriété CSS. Ce paramètre peut contenir n'importe quelle propriété CSS. Par exemple « couleur ».

La différence entre attr() et css() dans jquery

attr() dans jquery est d'obtenir/modifier les attributs et les valeurs ​​des éléments (lié aux balises HTML); css() consiste à obtenir/modifier les attributs de style des éléments (liés au style).

attr() opère principalement sur les attributs des éléments, comme l'attribut src et l'attribut alt d'img, l'attribut href d'un lien, etc.

css() modifie le style ; . Les attributs sont les attributs de style.

Le premier peut modifier l'attribut src de , l'attribut href de et l'attribut title de . Cependant, cette dernière ne fonctionne pas. Elle ne peut modifier que les fonctionnalités liées au style.

Ainsi, ce dernier est un sous-ensemble du premier, et n'opère que sur l'attribut spécifique du style.

Exemple :

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>

Résumé

Tutoriels vidéo associés recommandés : Tutoriel jQuery (Vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!