geekosupremo geekosupremo - 1 year ago 81
CSS Question

Using 'vanilla' JS to set CSS property on selected elements

JavaScript Newbie so the following question maybe 'dumb'.

For my work I do a little GreaseMonkey scripting to make our eCommerce store back end a little more friendly to our customer service team. Normally I'd make a new or better UI for them setup a special role or something, but with this current system, this is literally not an option.

Specifically I make a selection of links

visibility: hidden
, as they trigger some reporting functions which can lock up the backend till the reports are completed.

Up to this point I have had the script load jQuery, which is fine but not ideal. Then I dug in and saw that the interface was built using YUI, while this is already loaded, the syntax is weird to me, and I don't like it much, plus it is now not supported.

Recently I found the Plain JS site, which describes how to use 'vanilla' JS to do jQuery like things. Splendid! I thought, Now I can just write simple JS without extra dependencies or libs! But this is not quite the case.

I have tried the following:

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++){['visibility'] = 'hidden';
// this for loop doesn't seem to actually affect anything

What am I missing. Near as I can tell this should work.

Answer Source

Change this:

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

To this

for(var i = 0; i < links_to_hide.length; i++){
  links_to_hide[i].style['visibility'] = 'hidden';
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download