Maison  >  Article  >  interface Web  >  Quelle est la différence entre jquery css() et attr()

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

青灯夜游
青灯夜游original
2021-05-12 17:07:572770parcourir

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.

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

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 a1f02c36ba31691bcfe87b2722de723b, l'attribut href de 3499910bf9dac5ae3c52d5ede7383485 et l'attribut title de d5fd7aea971a85678ba271703566ebfd. 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é

la méthode css() consiste à obtenir/modifier les attributs de style (liés au style) ;

attr() consiste à obtenir/modifier les attributs des éléments (liés aux balises HTML) ; ) ) méthode ;

attr() et css() fonctionnent sur le style à la fois pour les styles en ligne.

style est également un attribut de l'élément, et attr() peut également opérer dessus, donc fonctionnellement, css() peut être considéré comme un sous-ensemble de attr().

L'opération attr() renvoie une chaîne et l'opération css() renvoie un objet.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn