Mit ‚Vanille‘ JS CSS-Eigenschaft auf ausgewählte Elemente

Question

JavaScript Newbie so die folgende Frage gesetzt vielleicht ‚dumm‘.

Für meine Arbeit habe ich ein kleines Greasemonkey Scripting unsere eCommerce Shop-Backend ein wenig freundlicher zu unserem Kundenservice-Team zu machen. Normalerweise würde ich eine neue oder bessere Benutzeroberfläche für sie erstellen eine spezielle Rolle oder etwas einrichten, aber mit diesem aktuellen System ist dies buchstäblich keine Option.

Insbesondere mache ich eine Auswahl von Links visibility: hidden, da sie einige Reporting-Funktionen auslösen, die die Backend einsperren kann, bis die Berichte abgeschlossen sind.

Bis zu diesem Zeitpunkt hatte ich das Skript laden jQuery, das ist in Ordnung, aber nicht ideal. Dann grub ich ein und sah, dass die Schnittstelle mit YUI erstellt wurde, während dies bereits geladen ist, die Syntax ist mir komisch, und ich mag es nicht sehr, und es wird jetzt nicht unterstützt.

Kürzlich fand ich die Plain JS Seite, die beschreibt, wie man 'Vanille' JS verwendet, um jQuery Dinge zu tun. Großartig! Ich dachte, Jetzt kann ich einfach JS ohne zusätzliche Abhängigkeiten oder Bibliotheken schreiben! Aber das ist nicht ganz der Fall.

Ich habe versucht, die folgenden:

var links = Array.from(document.querySelectorAll("a")); // creates an actual array from the node list returned by document.query 
var links_to_hide = links.slice(14, 22); // gets just the bits we want to affect from the array, and is still an array 

// ok so 'links_to_hide' is an array, and it is an array of 'a' anchor tags. 
// if I go into the inspector and set the visibility property it affects the tag but doing it via scripting seems to not work. 
// so if links_to_hide is an array it should be possible to 

for(var i = links_to_hide.length; i <= links_to_hide.length; i++){ 
    links_to_hide.style['visibility'] = 'hidden'; 
} 
// this for loop doesn't seem to actually affect anything 

Was bin ich dabei. In der Nähe, wie ich sagen kann, sollte das funktionieren.

Answer 1

ändern verwenden:

for(var i = links_to_hide.length; i <= links_to_hide.length; i++){ 
    links_to_hide.style['visibility'] = 'hidden'; 
} 

Zu diesem

for(var i = 0; i < links_to_hide.length; i++){ 
    links_to_hide[i].style['visibility'] = 'hidden'; 
} 

Answer 2

Sie nicht diese i

links_to_hide[i].style.visibility = 'hidden'; 

Answer 3

Ihre for-Schleife sollte wie unten sein:

for(var i = 0; i < links_to_hide.length; i++){ 
    links_to_hide[i].style.visibility = 'hidden'; 
}