Attributs et styles jQuery (6)

Obtenez l'attribut de style sur l'élément dom via JavaScript, et nous pouvons attribuer dynamiquement des attributs de style à l'élément. Dans jQuery, si nous voulons modifier dynamiquement l'attribut style, il suffit d'utiliser la méthode css() pour réaliser cette méthode

css() : obtenir la valeur calculée de l'attribut style de l'élément ou définir le CSS attribut de l'élément

Get :

css( propertyName ) : récupère la valeur calculée de l'attribut de style du premier élément de la collection d'éléments correspondants

css( propertyNames ) : Passe un tableau et renvoie un résultat d'objet

Paramètres :

css(propertyName, value) : Définir CSS

css(propertyName, function) : Vous pouvez transmettre un fonction de rappel et renvoyer la valeur correspondante. Traitement

css (propriétés) : Vous pouvez transmettre un objet et définir plusieurs styles en même temps

Remarque :

Les propriétés du navigateur sont obtenu de différentes manières. Lors de l'obtention de certaines valeurs, All jQuery utilise un traitement unifié, comme l'utilisation de RBG pour la couleur et px pour la taille. La méthode css() prend en charge l'écriture de cas camel et l'écriture de cas mixte est effectuée. uniquement en tant que valeur, jQuery le convertira en chaîne et ajoutera px à la fin de la chaîne, comme .css("width",50}) et .css("width", "50px"})

Jetons un coup d'œil à un morceau de code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div>php 中文网</div>

    <script>
        $('div').css('color','red');
    </script>
</body>
</html>

Changez le style du contenu dans le div

Regardons ce qui se passe si plusieurs styles sont modifiés, par exemple , si je souhaite définir une largeur, une hauteur ou un arrière-plan pour une balise div, comment dois-je l'écrire ?

Ensuite, commençons à écrire un morceau de code comme celui-ci :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div>php 中文网</div>
    
    <script>
        $("div").css({
            width:'200px',
            height:'200px',
            background:'#ccc'
        });
    </script>
</body>
</html>

En regardant le code ci-dessus, nous pouvons définir la largeur et la hauteur de l'arrière-plan de ｽｽｖ　 selon le style que nous voulons

Remarque : lorsque nous écrivons, nous devons terminer un attribut par une virgule. Lorsque nous écrivons le dernier, nous pouvons le faire sans virgule

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div>php 中文网</div> <script> $("div").css({ width:'200px', height:'200px', background:'#ccc' }); </script> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Attributs et styles jQuery (6)

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]