Question

很抱歉，这是一个非常简单的基本问题，对于前端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>

单击按钮时，对于此问题，文本输入边框或页面通常没有可见的更改。

任何方向将不胜感激，我将确保对任何帮助都予以支持，并将最适用的答案标记为已接受。预先感谢。

Answer 1

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

Answer 2

尝试一下：

<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

让我知道是否需要澄清。

Answer 3

还需要给它一个尺寸。只需添加它即可。

myInput.borderStyle =“ solid”; myInput.borderWidth ='1px'

Answer 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()">

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

4 个答案: