jquery définit le style en ligne css()-js tutoriel-php.cn

jquery définit le style en ligne css()

无忌哥哥

Libérer： 2018-06-29 14:02:25

original

4778 Les gens l'ont consulté

jquery définit le style en ligne css()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置内联样式css()</title>
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
background-color: wheat;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: coral;
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<img src="../images/jsy.jpg">
<div>
<div></div>
</div>
</body>
</html>

Copier après la connexion

La méthode css() est très similaire à la méthode attr() et est également livrée avec des fonctionnalités de lecture et de définition

Basé déterminé sur le nombre de paramètres L'opération à effectuer, un paramètre est à lire, et le deuxième paramètre est à définir. La fonction

équivaut à lire ou définir la valeur de l'attribut de style de l'élément actuel, qui est en fait le style en ligne

1. Définir le style css (nom, valeur)

var res = $(&#39;img&#39;).css(&#39;width&#39;,200)
var res = $(&#39;img&#39;).css(&#39;border-radius&#39;, &#39;10%&#39;)
var res = $(&#39;img&#39;).css(&#39;box-shadow&#39;, &#39;3px 3px 3px #888&#39;)
var res = $(&#39;img&#39;).css({
&#39;width&#39;: &#39;200&#39;,
&#39;border-radius&#39;: &#39;10%&#39;,
&#39;box-shadow&#39;: &#39;3px 3px 3px #888&#39;
})

Copier après la connexion

2. Lire le style css (nom), tous renvoyés sont des types de chaîne

var res = $(&#39;img&#39;).css(&#39;box-shadow&#39;)
var res = $(&#39;img&#39;).css(&#39;width&#39;)

Copier après la connexion

parce que ce qui est renvoyé est une chaîne, Par conséquent, pour des données telles que la largeur et la hauteur, si vous souhaitez les calculer, vous devez d'abord les convertir en un type numérique

var res = parseInt($(&#39;img&#39;).css(&#39;width&#39;), 10) //200
res += 50
var res = $(&#39;img&#39;).css(&#39;width&#39;,res+&#39;px&#39;)

Copier après la connexion

Cela peut être vu qu'une telle opération est très gênante, mais les calculs de largeur et de hauteur sont utilisés très fréquemment

Jquery a donc deux méthodes dédiées pour les styles de largeur et de hauteur : width() et height()

3 . Les méthodes width() et height()

définissent la largeur et la hauteur de l'image à 200 , l'unité par défaut est px

var res = $(&#39;img&#39;).width(200)
var res = $(&#39;img&#39;).width(&#39;200&#39;)
var res = $(&#39;img&#39;).width(&#39;200px&#39;)
var res = $(&#39;img&#39;).width(&#39;200pt&#39;)

Copier après la connexion

équivaut à :

var res = $(&#39;img&#39;).css(&#39;width&#39;,200)

Copier après la connexion

<. 🎜>Il est plus facile de définir la largeur et la hauteur, et prend en charge l'abréviation des opérateurs

var res = $(&#39;img&#39;).width(&#39;+=100&#39;)
var res = $(&#39;img&#39;).width()  //300

Copier après la connexion

, etc. Prix :

var res = $(&#39;img&#39;).css(&#39;width&#39;,&#39;+=50&#39;)
var res = $(&#39;img&#39;).width()  //250

Copier après la connexion

hauteur() méthode de hauteur, l'utilisation est exactement la même chose que width(), veuillez le tester vous-même

En plus de la largeur et de la hauteur, il est aussi souvent nécessaire d'obtenir la position actuelle de l'élément. Pour les opérations utilisées, jquery définit également des méthodes de raccourci.

4. Récupère la position de l'élément : offset(), qui renvoie un objet

var res = $(&#39;img&#39;).offset()

Copier après la connexion

pour interroger le décalage depuis la gauche et le haut Montant

var res = $(&#39;img&#39;).offset().left
var res = $(&#39;img&#39;).offset().top

Copier après la connexion

Vous pouvez voir que cette opération reflète la position de l'élément dans le flux normal du document

Si l'élément utilise un positionnement absolu, comment vérifier son décalage dans le bloc parent Qu'en est-il du décalage ?

5. Vérifiez le décalage de l'élément positionné de manière absolue : position()

var res = $(&#39;.box2&#39;).position().left
var res = $(&#39;.box2&#39;).position().top

Copier après la connexion

Les méthodes offset() et position() s'appliquent uniquement aux éléments visuels de la page et ne peuvent être obtenues, pas définies.

De même, scrollLeft() renvoie la position de la barre de défilement horizontale et scrollTop() renvoie la position de la barre de défilement verticale. Vous pouvez le tester par vous-même

Console pour voir les résultats.

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!