jQuery.(css) - le marginleft contre la marge de gauche?
Avec jQuery.(css), j'ai dit que je peut utiliser les deux fonctions suivantes pour le même résultat:
$(".element").css("marginLeft") = "200px";
$(".element").css("margin-left") = "200px";
j'ai toujours utilisé marginLeft car c'est ce qui est utilisé dans la documentation:
les propriétés CSS de type Shorthand (par ex. marge, background, border) ne sont pas soutenu. Par exemple, si vous voulez récupérer la marge rendue, utilisation: $(elem).css ('marginTop') et $(elem).css ("margright"), et si sur.
pourquoi jQuery a-t-il permis marginLeft ainsi que margin-left? Il semble inutile et utilise plus de ressources pour être converti à la CSS margin-left?
6 réponses
le code sous-jacent de jQuery passe 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 d'une manière très similaire:
element.style.marginLeft = "10px";
est l'équivalent de:
element.style["margin-left"] = "10px";
pourquoi jQuery a-t-il tenu compte de la marge de gauche comme de la marge de gauche? Il semble inutile et utilise plus de ressources pour être converti à la marge CSS-gauche?
jQuery ne fait pas vraiment quelque chose de spécial. Il peut modifier ou proxy certains les chaînes que vous passez à .css(), mais en réalité, il n'y avait pas de travail mettre dans de l'jQuery équipe pour permettre soit une chaîne à transmettre. Il n'y a pas de ressources supplémentaires utilisées parce que le DOM fait le travail.
je pense qu'il est si il peut garder la cohérence avec les options utilisées lors de paramètres multiples styles css en un seul appel de fonction par le biais de l'utilisation d'un objet, par exemple...
$(".element").css( { marginLeft : "200px", marginRight : "200px" } );
comme vous pouvez le voir, la propriété n'est pas spécifiée comme chaînes. JQuery prend également en charge l'utilisation de string si vous souhaitez toujours utiliser le tableau de bord, ou pour des propriétés qui ne peuvent peut-être pas être définies sans le tableau de bord, de sorte que ce qui suit fonctionne toujours...
$(".element").css( { "margin-left" : "200px", "margin-right" : "200px" } );
sans les citations ici, le javascript ne s'analyserait pas correctement car les noms de propriétés ne peuvent pas avoir de tiret.
EDIT: il semblerait que JQuery ne fasse pas réellement la distinction sonleft, mais qu'il ne fait que passer la propriété spécifiée pour que le DOM s'en soucie, très probablement avec style[propertyName];
jQuery soutient simplement la façon dont CSS est écrit.
en outre, il assure que peu importe comment un navigateur renvoie une valeur, il sera compris
jQuery peut également interpréter le formatage CSS et DOM plusieurs mots propriétés. Par exemple, jQuery comprend et retourne la valeur correcte pour les deux .css ("background-color") et .css ("backgroundColor").
quand le marginleft:
$("div").css({
marginLeft:'12px',
backgroundPosition:'10px -10px',
minHeight: '40px'
});
comme vous pouvez le voir, les attributs qui ont un trait d'Union sont convertis en format camelcased. À l'aide de la margin-left du bloc de code précédent ci-dessus ferait bonkers JavaScript parce qu'il traitera le trait d'Union comme une opération de soustraction.
quand marge-gauche:
$("div").css("margin-left","12px").css("background-position","10px -10px").css("min-height","40px");
théoriquement, les deux blocs de code feront la même chose. Nous pouvons autoriser les traits d'Union sur le deuxième bloc parce que c'est une valeur de chaîne alors que comparé au premier bloc, c'est un peu un objet.
Maintenant que doit faire sens.
en Retard pour répondre, mais personne n'a précisé que la propriété css avec une touche ne fonctionne pas dans l'objet de la déclaration en jquery:
.css({margin-left:'200px'});//won't work
.css({marginLeft:'200px'});//works
donc, n'oubliez pas d'utiliser les guillemets si vous préférez utiliser la propriété de style dash en code jquery.
.css({'margin-left':'200px'});//works
Salut j'ai essayé ça ça marche.
$("#change_align").css({"margin-top":"-39px","margin-right":"0px","margin-bottom":"0px","margin-left":"719px"});