interface Web
tutoriel CSS
Comment créer une fonction `generateSelector` pour générer un chemin de sélecteur CSS pour un élément DOM ?
Comment créer une fonction `generateSelector` pour générer un chemin de sélecteur CSS pour un élément DOM ?
La méthode
generateSelector est un outil utile pour déterminer le chemin d'accès à une partie spécifique d'un site Web, appelée élément DOM. Comprendre le fonctionnement des sélecteurs CSS et comment les créer peut être utile dans diverses situations, telles que l'automatisation des tests ou la création de raccourcis pour sélectionner facilement des éléments. Dans cet article, nous discuterons du concept de cette fonction et fournirons des exemples clairs sur la façon de l'utiliser.
Supposons que vous souhaitiez modifier un élément spécifique sur votre site Web. Mais comment savoir quel sélecteur utiliser ? C'est là qu'intervient notre fonction generateSelector ! Cette fonction obtiendra un élément spécifique sur le site Web et nous donnera un sélecteur que nous pourrons utiliser pour le modifier.
En savoir plus sur les sélecteurs CSS
Avant de nous plonger dans la création de la fonction generateSelector, il est crucial de comprendre ce que sont les sélecteurs CSS et les principes qui sous-tendent leur fonctionnement.
Les sélecteurs CSS sont des modèles utilisés pour sélectionner des éléments HTML sur une page qui nécessitent un style. Ils constituent un aspect fondamental des feuilles de style CSS, servant à appliquer des styles à des éléments spécifiques.
Exemple
La règle CSS suivante utilise un sélecteur pour cibler tous les éléments
de la page et attribue la propriété de style de couleur au rouge -
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This text will be red.</p>
</body>
</html>
Exemple
Le p dans les règles CSS est le sélecteur. Les sélecteurs CSS peuvent être beaucoup plus complexes que le nom de balise d'un élément. Ils peuvent être utilisés pour sélectionner des éléments en fonction de leur classe, ID, valeurs d'attribut, etc. Par exemple -
<!DOCTYPE html>
<html>
<head>
<style>
#main-header {
background-color: blue;
}
</style>
</head>
<body>
<header id="main-header">
<h1>My website</h1>
</header>
<!-- other content here -->
</body>
</html>
Cette règle CSS sélectionne l'élément avec l'ID "main-header" et lui applique le style "backgroundcolor: blue".
Créer la fonction generateSelector
Après avoir introduit le concept de sélecteurs CSS (un sélecteur CSS est une méthode d'identification et de positionnement d'éléments spécifiques dans une page Web à des fins de style), nous pouvons maintenant passer à la création de la fonction generateSelector. La fonction acceptera un élément DOM (Document Object Model) en entrée et en retour, elle fournira le chemin du sélecteur CSS pour cet élément spécifique.
Grammaire
function generateSelector(element) {
let selectors = [];
}
Tout d'abord, nous allons démarrer un tableau vide appelé "sélecteur". Ce tableau agira comme un conteneur pour les sélecteurs que nous générons pour un élément DOM donné lors du parcours et de l'inspection de ses éléments ancêtres.
Grammaire
while (element) {
let selector = '';
if (element.tagName === 'HTML') {
selector = 'html';
}
}
Lorsque nous parcourons chaque ancêtre, nous générerons un sélecteur pour celui-ci. Nous vérifions d'abord si l'élément est un élément Si c'est le cas, nous ajouterons la chaîne "html" à la variable du sélecteur
Pour tous les autres éléments, nous vérifierons si l'élément a un identifiant. Si tel est le cas, nous utiliserons l’ID comme sélecteur. Sinon, nous utiliserons le nom de balise de l'élément et son nom de classe comme sélecteur.
Grammaire
else {
if (element.id) {
selector = '#' + element.id;
} else {
selector = element.tagName.toLowerCase();
if (element.className) {
selector += '.' + element.className.replace(/\s+/g, '.');
}
}
}
Après avoir généré le sélecteur, nous l'ajoutons au tableau de sélecteurs et passons à l'ancêtre suivant en définissant element égal à element.parentNode.
Grammaire
selectors.unshift(selector);{
element = element.parentNode;
}
Enfin, nous utiliserons la méthode join() pour joindre tous les sélecteurs du tableau de sélecteurs et renvoyer le chemin du sélecteur CSS résultant sous forme de chaîne.
Grammaire
return selectors.join(' > ');{
}
Utilisez la fonction generateSelector
Maintenant que nous avons implémenté la fonction generateSelector, voyons comment l'utiliser en pratique.
Par exemple, disons que vous avez le HTML suivant -
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">
<p>Hello World</p>
</div>
<div id="result"></div>
<script>
function generateSelector(element) {
let selectors = [];
while (element) {
let selector = '';
if (element.id) {
selector = '#' + element.id;
} else {
selector = element.tagName;
}
selectors.unshift(selector);
element = element.parentNode;
}
return selectors.join(' > ');
}
</script>
<script>
window.onload = function(){
// Select the <p> element and get its CSS selector path
const p = document.querySelector("p");
if(p!==null){
const selector = generateSelector(p);
document.getElementById("result").innerHTML = selector;
}
else{
console.log("Error : Element not found");
}
}
</script>
</body>
</html>
Il est important de noter qu'il ne s'agit que d'un exemple et que le sélecteur variera en fonction des éléments et de la structure HTML que vous transmettez à la fonction.
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Créer votre propre bragdoc avec Eleventy
Mar 18, 2025 am 11:23 AM
Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.
Vue 3
Apr 02, 2025 pm 06:32 PM
Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.
Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur?
Apr 02, 2025 pm 06:17 PM
J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.
Un peu sur CI / CD
Apr 02, 2025 pm 06:21 PM
Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:
Comparaison des navigateurs pour une conception réactive
Apr 02, 2025 pm 06:25 PM
Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire
Cartes empilées avec un positionnement collant et une pincée de sass
Apr 03, 2025 am 10:30 AM
L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.
