Maison > interface Web > tutoriel CSS > ## Comment pouvons-nous améliorer la précision et la lisibilité des chemins CSS ?

## Comment pouvons-nous améliorer la précision et la lisibilité des chemins CSS ?

Patricia Arquette
Libérer: 2024-10-25 11:14:30
original
895 Les gens l'ont consulté

## How Can We Improve the Accuracy and Readability of CSS Paths?

Chemin CSS à partir de l'élément de document : approche améliorée

L'approche actuelle de génération de chemins CSS pourrait être améliorée pour plus de précision et de lisibilité.

La fonction d'origine :

var cssPath = function (el) {
  var path = [];

  while (
    (el.nodeName.toLowerCase() != 'html') && 
    (el = el.parentNode) &&
    path.unshift(el.nodeName.toLowerCase() + 
      (el.id ? '#' + el.id : '') + 
      (el.className ? '.' + el.className.replace(/\s+/g, ".") : ''))
  );
  return path.join(" > ");
}
Copier après la connexion

produit des chemins CSS comme :

html > body > div#div-id > div.site > div.clearfix > ul.choices > li
Copier après la connexion

Pour plus de précision, le chemin doit inclure nth-child() pour les éléments sans ID :

html > body > div#div-id > div.site:nth-child(1) > div.clearfix > ul.choices > li:nth-child(5)
Copier après la connexion

La fonction améliorée suivante résout ces problèmes :

var cssPath = function(el) {
    if (!(el instanceof Element)) 
        return;
    var path = [];
    while (el.nodeType === Node.ELEMENT_NODE) {
        var selector = el.nodeName.toLowerCase();
        if (el.id) {
            selector += '#' + el.id;
            path.unshift(selector);
            break;
        } else {
            var sib = el, nth = 1;
            while (sib = sib.previousElementSibling) {
                if (sib.nodeName.toLowerCase() == selector)
                   nth++;
            }
            if (nth != 1)
                selector += ":nth-of-type("+nth+")";
        }
        path.unshift(selector);
        el = el.parentNode;
    }
    return path.join(" > ");
 }
Copier après la connexion

Avec cette amélioration, le chemin CSS de l'élément donné sera plus précis et lisible.

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal