web-dev-qa-db-fra.com

jQuery.css () - marginLeft vs margin-left?

Avec jQuery.css (), on m'a dit que je pouvais utiliser les deux fonctions suivantes pour les mêmes résultats:

$(".element").css("marginLeft") = "200px";

$(".element").css("margin-left") = "200px";

J'ai toujours utilisé marginLeft car c'est ce qui est utilisé dans la documentation:

http://api.jquery.com/css/

Les propriétés CSS abrégées (par exemple, marge, arrière-plan, bordure) ne sont pas prises en charge. Par exemple, si vous souhaitez récupérer la marge rendue, utilisez: $ (elem) .css ('marginTop') et $ (elem) .css ('marginRight'), etc.

Pourquoi jQuery at-il autorisé marginLeft ainsi que margin-left? Cela semble inutile et utilise plus de ressources pour être converti au CSS margin-left?

jquerycssmargin
45
Curt

le code sous-jacent de jQuery transmet ces chaînes au DOM, ce qui vous permet de spécifier le nom de la propriété CSS ou le nom de la propriété DOM de manière très similaire:

element.style.marginLeft = "10px";

est équivalent à:

element.style["margin-left"] = "10px";

Pourquoi jQuery a-t-il permis les valeurs marginLeft et margin-left? Cela semble inutile et utilise plus de ressources pour être converti en CSS marge-gauche?

jQuery ne fait pas vraiment quelque chose de spécial. Cela peut modifier ou remplacer par proxy certaines chaînes que vous passez à .css(), mais en réalité, il y avait pas de travail inséré par l'équipe jQuery pour permettre la transmission de l'une ou l'autre chaîne. Aucune ressource supplémentaire n'est utilisée car le DOM effectue le travail.

50
Andy E

Je pense que c'est pour qu'il puisse rester cohérent avec les options disponibles utilisées lors de la configuration de plusieurs styles CSS dans un appel de fonction via l'utilisation d'un objet, par exemple ...

$(".element").css( { marginLeft : "200px", marginRight : "200px" } );

comme vous pouvez le voir, les propriétés ne sont pas spécifiées en tant que chaînes. JQuery prend également en charge l’utilisation de chaîne si vous souhaitez toujours utiliser le tiret, ou pour les propriétés qui ne peuvent peut-être pas être définies sans le tiret.

$(".element").css( { "margin-left" : "200px", "margin-right" : "200px" } );

sans les guillemets ici, javascript ne serait pas analysé correctement car les noms de propriétés ne peuvent pas contenir de tiret.

EDIT: Il semblerait que JQuery ne fasse pas vraiment la distinction, mais se contente de transmettre la propriété spécifiée pour le respect du DOM, très probablement avec style[propertyName];

35
musefan

Il est tard pour répondre, mais personne n’a précisé que la propriété css avec dash ne fonctionnerait pas dans la déclaration d’objet dans jquery:

.css({margin-left:'200px'});//won't work
.css({marginLeft:'200px'});//works

N'oubliez donc pas d'utiliser des guillemets si vous préférez utiliser la propriété de style de tiret dans le code jQuery.

.css({'margin-left':'200px'});//works
6
Bhojendra Rauniyar

quand est marginLeft utilisé:

 $ ("div"). css ({
 marginLeft: '12px', 
 backgroundPosition: '10px -10px', 
 minHeight: '40px' 
});

Comme vous pouvez le constater, les attributs comportant un trait d'union sont convertis au format camelcased. En utilisant le margin-left du bloc de code précédent ci-dessus rendrait JavaScript dingue, car il traiterait le trait d'union comme une opération de soustraction.

quand est margin-left utilisé:

 $ ("div"). css ("marge gauche", "12px"). css ("position de fond", "10px -10px"). css ("hauteur minimale", "40px ");

Théoriquement, les deux blocs de code feront la même chose. Nous pouvons autoriser des traits d'union sur le second bloc car il s'agit d'une valeur de chaîne alors que, comparé au premier bloc, il s'agit en quelque sorte d'un objet.
Maintenant, cela devrait avoir un sens.

5
Karvoin Gabiloux

jQuery soutient simplement la façon dont CSS est écrit.

En outre, il garantit que peu importe la façon dont un navigateur renvoie une valeur, il sera compris

jQuery peut également interpréter les formats CSS et DOM de plusieurs propriétés de Word. Par exemple, jQuery comprend et retourne la valeur correcte pour .css ('background-color') et .css ('backgroundColor').

4
Jason Gennaro