显示/隐藏文本输入边框的 Javascript答案

【问题标题】：Javascript to show/hide text input border显示/隐藏文本输入边框的 Javascript
【发布时间】：2019-06-11 23:33:59
【问题描述】：

对不起，这个非常基本/简单的问题，我对前端 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>

单击按钮时，文本输入边框或页面通常没有可见的变化。

任何方向都将不胜感激，我一定会支持任何帮助并将最适用的答案标记为已接受。提前致谢。

【问题讨论】：

标签： javascript html border textinput

【解决方案1】：

试试这个：

<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

如果有什么我需要澄清的，请告诉我。

【讨论】：

简单，切中要害，代码解释，完全按预期工作 = 赞成并标记为已接受的答案。非常感谢。

【解决方案2】：

Border 需要三个部分。大小，几乎可以用任何东西定义，即 2px，线的类型，例如点线或实线，以及颜色，例如 mediumspringgreen（最好的绿色）。因此，为了正确使用边框属性，您需要在 JavaScript 中使用上述三个属性来设置边框。您应该使用 myInput.borderStyle="1px solid crimson"; 或您希望使用的任何其他值，而不是 myInput.borderStyle="solid";。

【讨论】：

【解决方案3】：

你还需要给它一个大小.. 只需添加这个..

myInput.borderStyle="solid"; myInput.borderWidth= '1px'

【讨论】：

【解决方案4】：

您需要将样式边框设置为无，检查边框是否为空，并使用 .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()">

【讨论】：

代码工作，喜欢包含“运行代码 sn-p”，赞成