Attribut Selektor manipulieren mit Javascript

[einsiedler]

Hallo liebe Forumer,

Frage, WIE löscht man ein Attribut Selektor wie den in meinem Fall hier:

<button hidden="botton hidden" aria-expanded="undefined"><span class="visually-hidden">HauptNavigation</span></button>

in meinem CSS steht : [hidden] + .nav-group { display: block !important;}

Bei aktiviertem java-script soll dieser Attribut Selektor im html nicht mehr stehen.

Bitte NICHTs mit klick-event (wegen botton und so, NEIN ich benötige ihn NUR bei ausgeschaltetem Javascript , bei aktiviertem javascript soll dieser Attribut Selektor nicht vorhanden sein.

Bitte den Beispielcodezeile, keine Verlinungen, denn

showHide = function(){ document.querySelector('botton[hidden]').classList.remove('[hidden]'); }

funktioniert nicht! Ist wohl nicht die Richtige herangehensweise.

der einsiedelnde

[Gunnar Bittersmann]

@@einsiedler

<button hidden="botton hidden" aria-expanded="undefined">

hidden ist ein boolesches Attribut, d.h. es muss entweder ohne Wertzuweisung (<button hidden>) notiert werden oder mit "" oder "hidden" als Wert, aber nichts anderes.

in meinem CSS steht : [hidden] + .nav-group { display: block !important;}

Bei aktiviertem java-script soll dieser Attribut Selektor im html nicht mehr stehen.

Im HTML steht auch kein Attribut-Selektor (auch nicht ohne Deppenleerzeichen).

Im CSS steht einer: [hidden]. Im JavaScript steht auch einer: im Argument von document.querySelector('botton[hidden]').

Im HTML steht ein Attribut. Das Attribut willst du weghaben?

document.querySelector('botton[hidden]').classList.remove('[hidden]');

funktioniert nicht!

Kann ja auch nicht. Wie der Name schon sagt, ist classList für Klassen zuständig, nicht für beliebige andere Attribute.

MDN: Element.removeAttribute() oder einfach Element.hidden = true (wobei du Element durch die Referenz auf dein Element ersetzen musst).

LLAP 🖖

[beatovich]

hallo

Hallo liebe Forumer,

Frage, WIE löscht man ein Attribut Selektor wie den in meinem Fall hier:

<button hidden="botton hidden" aria-expanded="undefined"><span class="visually-hidden">HauptNavigation</span></button>

Irgendwie ist dein Hirn auf botton verdrahtet.

Lautet deine Frage, wie man Attribute entfernt? https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute

Das hidden Attribut ist entweder defined oder undefined. Nur in xhtml hat es den wert hidden="hidden".

[Auge]

Hallo

Frage, WIE löscht man ein Attribut Selektor wie den in meinem Fall hier:

Das ist in deinem Fall die falsche Frage.

<button hidden="botton hidden" aria-expanded="undefined"><span class="visually-hidden">HauptNavigation</span></button>

Was bedeutet der Wert „botton“ für das Attribut „hidden“?

Bei aktiviertem java-script soll dieser Attribut Selektor im html nicht mehr stehen.

Bitte NICHTs mit klick-event (wegen botton und so, NEIN ich benötige ihn NUR bei ausgeschaltetem Javascript, bei aktiviertem javascript soll dieser Attribut Selektor nicht vorhanden sein.

Entferne den Attributwert bei Eintreten des Events DOMContentLoaded.

function dokumentGeladen (e) {
   showHide();
   // weiterer Code, der nach dem laden des DOM ausgeführt werden soll
}
function showHide() {
   var elem = document.querySelector('button[hidden]');
   if (elem.hasAttribute("hidden")) {
      elem.removeAttribute("hidden");
   }
}
document.addEventListener('DOMContentLoaded', dokumentGeladen);

Es wird mit querySelector übrigens nur das erste Element, auf das der Selektor passt, gefunden. Wenn es mehrere Buttons gibt, solltest du querySelectorAll benutzen und mit einer Schleife über die Ergebnismenge gehen.

showHide = function(){ document.querySelector('botton[hidden]').classList.remove('[hidden]'); }

funktioniert nicht! Ist wohl nicht die Richtige herangehensweise.

Ist wohl zuvörderst falsch geschrieben. Was ist hier „botton“? Zudem ist die Aktion falsch. Du hast, zumindest im oben gezeigten HTML-Code keine Klasse „hidden“, die du entfernen kannst.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Entferne den Attributwert bei Eintreten des Events DOMContentLoaded.

Wie willst du einen Wert eines Attributs entfernen, das gar keinen hat? Du willst das Attribut entfernen.

Und wenn das Script entsprechend plaziert ist (am Ende des body), braucht man auch keinen Eventhandler dafür.

   if (elem.hasAttribute("hidden")) {
      elem.removeAttribute("hidden");
   }

Die Abfrage ist überflüssig. „Der Versuch, ein nicht vorhandenes Attribut zu entfernen, wirft keine Exception.“ [MDN]

LLAP 🖖

[Auge]

Hallo

Entferne den Attributwert bei Eintreten des Events DOMContentLoaded.

Wie willst du einen Wert eines Attributs entfernen, das gar keinen hat? Du willst das Attribut entfernen.

Verschrieben.

Und wenn das Script entsprechend plaziert ist (am Ende des body), braucht man auch keinen Eventhandler dafür.

Ja. Wenn jedoch nicht, dann doch.

   if (elem.hasAttribute("hidden")) {
      elem.removeAttribute("hidden");
   }

Die Abfrage ist überflüssig. „Der Versuch, ein nicht vorhandenes Attribut zu entfernen, wirft keine Exception.“ [MDN]

Noch einfacher und zudem auch besser lesbar. Also nur elem.removeAttribute("hidden") ohne das if (elem.hasAttribute("hidden")) drum herum.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Noch einfacher und zudem auch besser lesbar. Also nur elem.removeAttribute("hidden") ohne das if (elem.hasAttribute("hidden")) drum herum.

Noch einfacher (wie gesagt): elem.hidden = true. (Browser, die das so nicht können, sollten inzwischen ausgestorben sein.)

LLAP 🖖

[Orlok]

Hallo Gunnar

elem.hidden = true.

FYI, Attribute Reflection ist in der WAI-ARIA 1.2 Spec nun auch für role und den ganzen Stapel an aria-*-Attributen vorgesehen. Auch bei diesen Attributen muss also nicht mehr umständlich mit Methoden wie setAttribute hantiert werden.

element.role = 'toolbar';

Das Element-Interface des DOM wird mit zwei Mixins erweitert, so dass eine Rolle wie in dem Beispiel oben nun auch syntaktisch zugewiesen werden kann.

Hat man ein Attribut wie aria-pressed …

<button type="button" aria-pressed="false">
    Notify by electric shock
</button>

… kann das nun auch als Objekteigenschaft gelesen werden:

document.querySelector('[aria-pressed]').ariaPressed; // 'false'

Aus Kompatibilitätsgründen wird hier leider nur ein String zurückgegeben. Schöner wäre es natürlich, wenn boolesche Attributwerte auch als Werte vom Typ Boolean zurückgegeben würden. Aber ich habe wenig Hoffnung, dass sich da noch was ändert.

Trotzdem finde ich, dass der Zugriff auf ARIA-Attribute über Eigenschaften vieles einfacher macht, weshalb ich dafür mal ein Polyfill geschrieben habe.

Viele Grüße,

Orlok