Méthodes CSS jQuery

Méthode jQuery css()

La méthode css() définit ou renvoie une ou plusieurs propriétés de style de l'élément sélectionné.

Renvoyer les propriétés CSS

Pour renvoyer la valeur de la propriété CSS spécifiée, veuillez utiliser la syntaxe suivante :

css("propertyname");

L'exemple suivant renverra la valeur de couleur d'arrière-plan du premier élément correspondant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                alert("背景颜色 = " + $("p").css("background-color"));
            });
        });
    </script>
</head>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回 p 元素的 background-color </button>
</body>
</html>

Exécutez le programme pour l'essayer

Définir les propriétés CSS

Pour définir des propriétés CSS spécifiques, veuillez utiliser la syntaxe suivante :

css("propertyname","value");

L'exemple suivant définira la valeur de couleur d'arrière-plan pour tous les éléments correspondants :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color","yellow");
  });
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>设置 p 元素的 background-color </button>
</body>
</html>

Exécutez le programme pour essayez-le

Définissez plusieurs propriétés CSS

Si vous devez définir plusieurs propriétés CSS, veuillez utiliser la syntaxe suivante :

css({"propertyname":"value","propertyname":"value",...});

L'exemple suivant définira l'arrière-plan- couleur et taille de police pour tous les éléments correspondants :

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").css({"background-color":"yellow","font-size":"150%"});
            });
        });
    </script>
</head>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p >这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>为 p 元素设置多个样式</button>
</body>
</html>

Exécutez le programme et essayez-le

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ alert("背景颜色 = " + $("p").css("background-color")); }); }); </script> </head> <body> <h2>这是一个标题</h2> <p style="background-color:#ff0000">这是一个段落。</p> <p style="background-color:#00ff00">这是一个段落。</p> <p style="background-color:#0000ff">这是一个段落。</p> <button>返回 p 元素的 background-color </button> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Méthodes CSS jQuery

É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]