很抱歉，这是一个非常简单的基本问题，对于前端Web开发我还是很陌生。
我已经看过许多有关使用Javascript在网页上显示/隐藏内容的问题，但是没有人谈论专门显示/隐藏文本输入边框的问题。
在我的页面上，我有一个文本输入和一个按钮。
页面加载时，我不希望文本输入边框可见。
单击按钮后，我希望它更改文本输入边框的状态（即：如果单击按钮时未显示文本输入边框，则它将调用javascript函数以使文本输入边框可见。如果文本输入边框可见，然后按钮调用的javascript函数将使文本输入边框不可见。）
到目前为止，这是我的代码：
<html>
<head>
<title>Text Input Border test</title>
</head>
<body>
<br>
<input type="text" id="address1" value="test text input" class="question-text" size=30>
<br>
<input type="button" value="Click me" onclick="showBorder()">
</body>
<script type="text/javascript">
function showBorder () {
var myInput = document.getElementById("address1").style;
myInput.borderStyle="solid";
}
</script>
<style scoped lang="scss">
.question-text {
border: 0;
}
</style>
</html>
单击该按钮时，就此而言，文本输入边框或页面通常没有可见变化。
任何方向将不胜感激，我将确保对任何帮助都予以支持，并将最适用的答案标记为已接受。提前致谢。
最佳答案
尝试这个：
<html>
<head>
<title>Text Input Border test</title>
</head>
<body>
<br>
<input type="text" id="address1" value="test text input" class="question-text" size=30>
<br>
<input type="button" value="Click me" onclick="toggleBorder()">
</body>
<script type="text/javascript">
function toggleBorder () {
var myInput = document.getElementById("address1");
myInput.classList.toggle('question-text-border');
}
</script>
<style scoped lang="scss">
.question-text {
border: 0;
}
.question-text-border {
border: 1px solid black;
}
</style>
</html>
classList基本上是具有一些特殊功能的数组：Class List Docs在类列表上调用切换将删除该类（如果存在），并添加该类（如果不存在）
底部的CSS类
.question-text-border覆盖类.question-text让我知道是否需要澄清。