Verwenden Sie Variablen im Dokument.querySelector

Wenn ich:

<div class="test" data-name="Paul" >

und

var name = "Paul";

Kann ich document.querySelector, so etwas zu tun?

document.querySelector("[data-name=name]");

Funktioniert das nicht. Was muss ich tun?

  • Uhhhhh... "[data-name="+name+"]" vielleicht?
  • das ist keine variable, das ist ein string-literal.
  • document.querySelector('.test') oder document.getElementsByClassName('test')[0] wenn Sie eine Klasse haben, warum würden Sie wollen, zu verwenden, eine unkonventionelle Art und Weise?
  • Kein Mensch, es gibt eine Menge von Elementen mit der Klasse "test", ich habe wählen Sie mit dem data-name
  • Wiedereröffnung, weil die Flucht CSS-Bezeichnern ist nicht abgedeckt durch die andere Frage.
InformationsquelleAutor Gicminos | 2016-05-06
  1. 17

    Können Sie tun, aber Sie müssen verwenden die CSS.escape() - Funktion um sicherzustellen das der Wert richtig ist, codiert für die Verwendung in einer CSS-expression.

    var name = "hello, world!";
document.querySelector("[data-name=" + CSS.escape(name) + "]");
    <div data-name=​"hello, world!">​…</div>

    ES2015: 

    const name = "hello, world!";
document.querySelector(`[data-name=${CSS.escape(name)}]`);

    Wenn Sie nicht CSS.escape(...) dann bestimmte Werte von name könnte Ihr code einen Fehler auslösen, statt.

    var name = "hello, world!";
document.querySelector("[data-name=" + name + "]");
    Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '[data-name=hello, world!]' is not a valid selector

    Wenn Sie eine Ausrichtung auf eine browser, die nicht nativ unterstützen CSS.escape() die Sie verwenden können,diese polyfill von Mathias Bynens.

    InformationsquelleAutor Jeremy Banks
  2. 3

    Müssen Sie zum verketten von strings, wie:

    document.querySelector("[data-name=" + name + "]");

    Beispiel:

    (Siehe @Jeremy Bank Antwort für eine viel bessere Antwort, tho)

    JS:

    var name = "Paul";
var element = document.querySelector("[data-name=" + name + "]");

alert(element.nodeName);

    HTML:

    <div class="test" data-name="Paul">
  test.
</div>

    • Nur wenn der Wert des name ist ein CSS-Bezeichner.
    • fairer Kommentar, thx - die Leser an die bessere Antwort, die Griffe der Fall, wenn es nicht eine CSS-Id
    InformationsquelleAutor ochi
Schreibe einen Kommentar