Résumé des méthodes jquery pour utiliser les styles, les positions et les tailles CSS_jquery

1.CSS

1.css(nom)

Accédez à l'attribut style du premier élément correspondant.
Valeur de retour Chaîne
Paramètres
name (String) : Le nom de l'attribut auquel accéder
Exemple :

Copier le code Le code est le suivant :

$("p").css("color"); //Récupère la valeur de l'attribut de style de couleur du premier paragraphe

2. css(propriétés)

Définissez un objet paire nom/valeur comme attribut de style de tous les éléments correspondants. C'est le meilleur moyen de définir un grand nombre de propriétés de style sur tous les éléments correspondants.
Valeur de retour jQuery
Paramètres
propriétés (Carte) : Paires nom/valeur à définir comme propriétés de style
Exemple :

Copier le code Le code est le suivant :

//1 Définit la couleur de la police de tous les paragraphes sur rouge et l'arrière-plan sur bleu
$("p").css({ couleur : "#ff0011", fond : "bleu" }); //2 Si le nom de l'attribut contient "-", les guillemets
doivent être utilisés $("p").css({ "margin-left": "10px", "background-color": "bleu" });

3. css(nom, valeur)

Définissez la valeur d'un attribut de style sur tous les éléments correspondants. Les nombres seront automatiquement convertis en valeurs de pixels

Valeur de retour jQuery

Paramètres

nom (valeur) : nom de l'attribut

value (String, Number) : valeur de l'attribut

Exemple :

Copier le code Le code est le suivant :

$("p").css("color","red"); //Définit la police de tous les paragraphes en rouge

2. Localisation

1. offset()

Obtenir le décalage relatif de l'élément correspondant dans la fenêtre de vue actuelle. L'objet renvoyé contient deux propriétés entières : top et left.

Remarque : Cette méthode ne fonctionne que sur les éléments visibles.

Valeur de retour Objet{top,gauche}
Exemple :

Copier le code Le code est le suivant :

/*

//Obtenir le décalage du deuxième segment
Fragment de document :

Bonjour

2ème paragraphe

*/
var p = $("p:dernier");
var offset = p.offset();
p.html("left: " offset.left ", top: " offset.top
);

2. position()

Obtenir le décalage de l'élément correspondant par rapport à l'élément parent. L'objet renvoyé contient deux propriétés entières : top et left. Pour des calculs précis, utilisez des unités de pixels pour les propriétés de remplissage, de bordure et de remplissage. Cette méthode ne fonctionne que sur les éléments visibles.

Valeur de retour Objet{top,gauche}

Exemple :

Copier le code Le code est le suivant : /*

//Obtenir le décalage du premier paragraphe

Fragment de document :

Bonjour

2ème paragraphe

*/
var p = $("p:premier");
var position = p.position();
$("p:last").html("left: " position.left ", top: " position.top
);



3. scrollTop()

Obtenir le décalage de l'élément correspondant par rapport au haut de la barre de défilement. Remarque : Cette méthode fonctionne à la fois pour les éléments visibles et masqués. Valeur de retour Entier

Exemple :

Copier le code

Le code est le suivant : /* //Obtenir le décalage du premier segment par rapport au haut de la barre de défilement

Fragment de document :

Bonjour

2ème paragraphe

*/

var p = $("p:premier");
$("p:last").text("scrollTop:" p.scrollTop());



4. scrollTop(val)

Lors du passage de la valeur du paramètre, définissez le décalage supérieur de la barre de défilement sur cette valeur. Cette méthode fonctionne à la fois pour les éléments visibles et cachés. Valeur de retour jQuery

Exemple :

Copier le code

Le code est le suivant : $("div.demo").scrollTop(300);

5. scrollLeft()

Obtenez le décalage de l'élément correspondant par rapport au côté gauche de la barre de défilement. Cette méthode fonctionne à la fois pour les éléments visibles et cachés.
Valeur de retour Entier
Exemple :

Copier le code Le code est le suivant :

/*
//Obtenir le décalage du premier segment par rapport au côté gauche de la barre de défilement
Fragment de document :

Bonjour

2ème paragraphe

*/
var p = $("p:premier");
$("p:last").text("scrollLeft:" p.scrollLeft());

6. scrollLeft(val)

Lors du passage de la valeur du paramètre, définissez le décalage gauche de la barre de défilement sur cette valeur. Cette méthode fonctionne à la fois pour les éléments visibles et cachés.

Valeur de retour jQuery

Exemple :

Copier le code Le code est le suivant :

$("div.demo").scrollLeft(300);

3. Taille

1. hauteur()

Obtenez la valeur de hauteur (px) actuellement calculée du premier élément correspondant. Après jQuery 1.2, il peut être utilisé pour obtenir la hauteur de la fenêtre et du document

Valeur de retour Entier

Exemple :

Copier le code Le code est le suivant :

/*

//Obtenir la hauteur du premier paragraphe
Fragment de document :

Bonjour

2ème paragraphe

*/
alert($("p").height());
//Obtenir la hauteur du document
alert($(document).height());

2. hauteur(val)

Définit la valeur de la propriété CSS height (hidth) pour chaque élément correspondant. Si l'unité n'est pas spécifiée explicitement (par exemple em ou %), px est utilisé. Si l'unité n'est pas spécifiée explicitement (par exemple em ou %), px est utilisé. Valeur de retour jQuery

Paramètres

val (String, Number) : Définissez la valeur de 'hauteur' en CSS
Exemple :

Copier le code Le code est le suivant : /*

// Fixe la hauteur de tous les paragraphes à 20

Fragment de document :

Bonjour

2ème paragraphe

*/
$("p").hauteur(20);
alert($("p").height());




3. largeur()

Obtenez la valeur de largeur (px) actuellement calculée du premier élément correspondant. Après jQuery 1.2, il peut être utilisé pour obtenir la largeur de la fenêtre et du document Valeur de retour Entier Exemple : 0

Copier le code

Le code est le suivant : /* //Obtenir la largeur du premier paragraphe

Fragment de document :

Bonjour

2ème paragraphe

*/

alerte($("p").width());




4. largeur(val)

Définit la valeur de la propriété CSS width pour chaque élément correspondant. Si l'unité n'est pas spécifiée explicitement (par exemple em ou %), px est utilisé.

Valeur de retour jQuery Paramètres val (String, Number) : Définissez la valeur de la propriété CSS 'width'

Exemple :

Copier le code

Le code est le suivant : /* //Définissez la largeur de tous les paragraphes sur 20 Fragment de document :

Bonjour

2ème paragraphe

*/

$("p").width(20);

alerte($("p").width());




5. innerHeight()

Obtenir la hauteur de la zone interne du premier élément correspondant (y compris le remplissage et hors bordures). Cette méthode fonctionne à la fois pour les éléments visibles et cachés. Valeur de retour Entier

Exemple :

Copier le code

Le code est le suivant : /* //Obtenir la hauteur de la zone interne du premier paragraphe Fragment de document :

Bonjour

2ème paragraphe

*/ var p = $("p:premier");

$("p:last").text("innerHeight:" p.innerHeight());

7. innerWidth()

Obtenir la largeur de la zone interne du premier élément correspondant (y compris le remplissage et hors bordures). Cette méthode fonctionne à la fois pour les éléments visibles et cachés.
Valeur de retour Entier
Exemple :

Copier le code Le code est le suivant :

/*
//Obtenir la largeur de la zone interne du premier paragraphe
Fragment de document :

Bonjour

2ème paragraphe

*/
var p = $("p:premier");
$("p:last").text("innerWidth:" p.innerWidth());

7. hauteurextérieure (options)

Obtenir la hauteur extérieure du premier élément correspondant (la valeur par défaut inclut le remplissage et la bordure). Cette méthode fonctionne à la fois pour les éléments visibles et cachés.

Valeur de retour Entier

Paramètres
options(Boolean) : (false) Lorsqu'elle est définie sur true, les marges sont incluses dans le calcul.
Exemple :

Copier le code Le code est le suivant :

/*

//Obtenir la hauteur externe du premier paragraphe
Fragment de document :

Bonjour

2ème paragraphe

*/
var p = $("p:premier");
$("p:last").text("outerHeight:" p.outerHeight() " , externalHeight(true):" p.outerHeight(true));



8. hauteurextérieure (options)

Obtenir la largeur extérieure du premier élément correspondant (la valeur par défaut inclut le remplissage et la bordure). Cette méthode fonctionne à la fois pour les éléments visibles et cachés. Valeur de retour Entier Paramètres

options(Boolean) : (false) Lorsqu'elle est définie sur true, les marges sont incluses dans le calcul.

Exemple :




Copier le code

Le code est le suivant : /* //Obtenir la largeur extérieure du premier paragraphe

Fragment de document :

Bonjour

2ème paragraphe

*/

var p = $("p:premier");
$("p:last").text("outerWidth:" p.outerWidth() " , externalWidth(true):" p.outerWidth(true));



Ce qui précède est l'intégralité du contenu des styles, positions et tailles CSS exploitant jQuery. Il s'agit d'un résumé purement personnel. S'il y a des omissions ou des erreurs, veuillez nous en informer.