Heim > Web-Frontend > CSS-Tutorial > ## Wie können wir die Genauigkeit und Lesbarkeit von CSS-Pfaden verbessern?

## Wie können wir die Genauigkeit und Lesbarkeit von CSS-Pfaden verbessern?

Patricia Arquette
Freigeben: 2024-10-25 11:14:30
Original
896 Leute haben es durchsucht

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

CSS-Pfad aus Dokumentelement: Erweiterter Ansatz

Der aktuelle Ansatz zum Generieren von CSS-Pfaden könnte im Hinblick auf Genauigkeit und Lesbarkeit verbessert werden.

Die ursprüngliche Funktion :

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(" > ");
}
Nach dem Login kopieren

erzeugt CSS-Pfade wie:

html > body > div#div-id > div.site > div.clearfix > ul.choices > li
Nach dem Login kopieren

Aus Gründen der Genauigkeit sollte der Pfad nth-child() für Elemente ohne IDs enthalten:

html > body > div#div-id > div.site:nth-child(1) > div.clearfix > ul.choices > li:nth-child(5)
Nach dem Login kopieren

Die folgende erweiterte Funktion behebt diese Probleme:

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(" > ");
 }
Nach dem Login kopieren

Mit dieser Verbesserung wird der CSS-Pfad für das angegebene Element präziser und lesbarer.

Das obige ist der detaillierte Inhalt von## Wie können wir die Genauigkeit und Lesbarkeit von CSS-Pfaden verbessern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage