显示/隐藏文本输入边框的Javascript
很抱歉问了一个非常基本/简单的问题，我对前端web开发非常陌生 我看了很多关于使用Javascript在网页上显示/隐藏内容的问题，但并没有一个专门讨论显示/隐藏文本输入边框 在我的页面上，我有一个文本输入和一个按钮 当页面加载时，我不希望文本输入边框可见 单击按钮时，我希望它更改文本输入边框的状态，即：如果单击按钮时文本输入边框未显示，则它将调用javascript函数以使文本输入边框可见。如果文本输入边框可见，则按钮调用的javascript函数将使文本输入边框不可见 以下是我目前的代码：显示/隐藏文本输入边框的Javascript,javascript,html,border,textinput,Javascript,Html,Border,Textinput,很抱歉问了一个非常基本/简单的问题，我对前端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>
如果您有任何指导，我将不胜感激。我一定会投票支持您的帮助，并将最适用的答案标记为已接受。提前谢谢。您还需要给它一个尺寸。。 再加上这个 myInput.borderStyle=实体；
myInput.borderWidth='1px'您需要设置样式边框无，检查边框是否为null，并使用.style.border将边框设置为所需的边框： // var myInput=document.getElementByIdaddress1； // 函数showBorder{ 如果myInput.style.border=={ myInput.style.border=1px纯黑色； }否则{ myInput.style.border=； } } .问题文本{ 边界：无； } 需要三个部分。几乎可以用任何形式定义的大小，例如2px，线的类型，如虚线或实线，以及颜色，如mediumspringgreen，最好的绿色。因此，为了正确使用border属性，需要使用上述三个属性在JavaScript中设置边框。而不是myInput.borderStyle=solid；，您应该使用myInput.borderStyle=1px实心深红色；，或者您希望使用的任何其他值。尝试以下操作：
<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>
如果有什么需要澄清的，请告诉我。简单，直截了当，代码解释，完全按照预期工作=向上投票，并标记为接受答案。非常感谢。代码很管用，喜欢包含运行代码片段，向上投票