Maison > Article > interface Web > jquery définit le style en ligne css()

jquery définit le style en ligne css()

无忌哥哥original: 2018-06-29 14:02:254738parcourir

<!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>

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;
})

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;)

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;)

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;)

équivaut à :

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

<.>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

, etc. Prix :

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

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()

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

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

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!

jquery css 运算符字符串字符串类型对象 position

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

Article précédent：Comment utiliser des données fictives dans le projet vue-cliArticle suivant：Comment utiliser des données fictives dans le projet vue-cli

Articles Liés

Voir plus