显示：

document.querySelectorAll(".login").forEach(a=>a.style.display = "initial");

隐藏：

document.querySelectorAll(".login").forEach(a=>a.style.display = "none");

现在有点晚了，但这能看到一些风景。为什么不：

var arrayOfElements=document.getElementsByClassName('login');
var lengthOfArray=arrayOfElements.length;

for (var i=0; i<lengthOfArray;i++){
    arrayOfElements[i].style.display='inline';
}

改变每个元素的display是一个坏主意。只要切换所有这些login的 Package 器的类，并在CSS中设置display。

一个建议，为什么不使用JQuery。它非常简单和容易，样式可以是无/内联/块等

$('.className').css('display','style');

我遇到了同样的问题，在几乎没有JavaScript经验的情况下，我在一天之内想出了这个解决方案。所以如果有什么问题，请注意并评论。我发现了getElementsByClassName()方法，它返回一个类似数组的集合对象，该对象包含所有具有给定类名的子元素，更多关于getElementsByClassName()的内容。此外，我希望能够通过一个按钮来完成，所以这可能取决于你是否需要两个按钮来隐藏或显示。你可以用classList.add()和classList.remove()来完成。
创建CSS类：

.hidden { display: none; }

然后使用这个函数按类定位HTML元素：

function toggleComments() {
    var elements = document.getElementsByClassName("comment");
    var i;
    for (i = 0; i < elements.length; i++) {
        elements[i].classList.toggle("hidden");
    }
}

for循环用于获取该类的所有元素，并使用classList.toggle为它们切换.hidden类。
您还可以使用querySelectorAll()，它返回文档中与指定CSS选择器路径匹配的所有元素。
另一个选项是forEach()，而不是for循环：

function toggleComments() {
  var elements = document.querySelectorAll(".comment");
  elements.forEach(element => element.classList.toggle("hidden"));
}

您可以在找到CSS规则后使用以下函数对其进行更改

function findCssRule(selector){
    var sheet;
    var list;
    var rule;
    var sheets = document.styleSheets;

    if(sheets) {
        for(var i = 0; sheet = sheets[i++]; ) {
            list = sheet.cssRules || sheet.rules;   // sheet.rules in IE;
            for( var j = 0; j < list.length; ++j) {
                rule=list[ j]
                if(rule.type != 1)  // styleRule
                    continue;
                if(rule.selectorText != selector)
                    continue;
                return rule;
            }
        }
    }
    return null;
}

并把它应用到

if(rule = findCssRule(".login"))
     rule.style.display = 'none';  // or whatever it needs to be.

我没有注意到其他人做过这种事情，所以请在使用前检查一下。@br3t的回复方式要平常得多。

function show_all()
    {
	$('.login').css('display','block');
    	document.getElementById('button-hide').style.display = 'inline';
    	document.getElementById('button-show').style.display = 'none';
    };
    function hide_all()
    {
    	$('.login').css('display','none');
    	document.getElementById('button-hide').style.display = 'none';
    	document.getElementById('button-show').style.display = 'inline';
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    	<input type="button" value="Show login Buttons" id="button-show" onclick="show_all();"/>
    	<input type="button" value="Hide login Buttons" id="button-hide" onclick="hide_all();"/>
    </nav>
        <p class="login">Username:</p>
        <!--<img src="un.png" class="login"/>-->
        <p class="login">Password:</p>
    <p>Something not meant to be hidden.</p>
        <!--<img src="pass.png" class="login"/>-->

我只是使用了jQuery的离线版本。

我也遇到了这个问题。使用jQuery确实可以帮助消除使用Id标记或自定义JavaScript函数的单调性。
您所需要做的就是将类添加到每个元素中，然后在javascript函数中使用一行jQuery来隐藏或显示这些类。
超文本：

<div class="example"><p>Hide me</p></div>
<button ... onclick="exampleClick()">Click to Hide</button>

JavaScript语言：

function exampleClick() {
jQuery(".example").hide();
}