很抱歉提出非常基本/简单的问题，我对前端Web开发很陌生。
我看过很多关于使用Javascript在网页上显示/隐藏内容的问题，但没有一个问题专门讨论显示/隐藏文本输入边框。
在我的页面上，我有一个文本输入和一个按钮。
当页面加载时，我不希望文本输入边框可见。
单击按钮时，我希望它更改文本输入边框的状态(IE：如果单击按钮时文本输入边框未显示，则它会调用 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基本上是一个具有一些特殊功能的数组： 类列表文档- 在类列表上调用切换会删除该类(如果存在)，如果不存在，则会添加该类
- 底部的 css 类
.question-text-border覆盖类.question-text
如果有什么需要澄清的，请告诉我。
边框需要三个部分。 大小，几乎以任何内容定义，即 2px，线条类型，例如虚线或实心，以及颜色，例如中泉绿(最佳绿色)。 因此，为了正确使用 border 属性，您需要使用上述三个属性在 JavaScript 中设置边框。 代替myInput.borderStyle="solid";，你应该使用myInput.borderStyle="1px solid crimson";或你希望使用的任何其他值。
你还需要给它一个大小。 只需添加这个..
myInput.borderStyle="solid"; myInput.borderWidth= '1px'
您需要设置样式边框 none ，检查边框是否为 null，并使用 .style.border 将边框设置为所需的边框：
//
var myInput = document.getElementById("address1");
//
function showBorder() {
if (myInput.style.border == "") {
myInput.style.border = "1px solid black";
} else {
myInput.style.border = "";
}
}.question-text {
border: none;
}<input type="text" id="address1" value="test text input" class="question-text" size=30>
<br>
<input type="button" value="Click me" onclick="showBorder()">