如何使用 JavaScript 为元素设置内联 css 样式？

Question

I am trying to select an element by its "name" attribute and it's not working. In the console I receive teh following error:

VM777:1 Uncaught TypeError: Cannot read property 'tagName' of undefined

My code is:

var test = document.getElementsByName("parameterstest")[0].tagName;
test.style.display='none';

Its seems like this code should work when I run it in the Chrome console.

Answer 1

When you write document.getElementsByName("parameterstest")[0].tagName; it returns you a string containing the tag name of that element. There is no way you can apply style property on that string. You can use style property on the element which is retrieved like this document.getElementsByName("parameterstest")[0]

So it should be

var test = document.getElementsByName("parameterstest")[0];
test.style.display='none';

Answer 2

As people have pointed out, using .tagName just returns the String of the tag name, like "TEXTAREA" or "DIV", and you can't set a style on a String.

What you seem to want to do is set a style on all the selected sorts of things, which you can do on each individual item.

document.getElementsByName("parameterstest") will return an array of zero or more items. For something like an <input type="text" name="..."> it's likely to be one item; for <input type="radio" name="..."> it's likely to be several items.

Regardless of how many items are returned, you can apply something to all of them by using the .forEach method of an Array.

document.getElementsByName('parameterstest')
        .forEach(function(el) {
                     el.style.display = 'none';
                 });