Question

当我点击一个标签时，就在下面，应该显示一些TextArea，其中包含一些预定义文本，用户不应该修改TextArea的内容。

这是我尝试的方式：

<html>

  <head>
    <script type="text/javascript">
    function myfunc2() {
      document.getElementById('showthis').style.visibility = "visible"
    }
    </script>
  </head>

  <body>
    <label onclick="myfunc2()">Click here</label>
    <textarea id="showthis" style="display:none">dfdsfsfasdfdsfsfasdfssdfsfasf</textarea>
  </body>

</html>

我对这个HTML和javascript很新...请有人帮我这个..

Answer 1

试试这个..

document.getElementById('showthis').style.display = "block";
document.getElementById('showthis').readOnly=true;

<强>更新

检查classname（hide）..如果是..显示textarea并将其命名为show ...否则隐藏它并将类名命名为hide

JAVASCRIPT

function myfunc2() {
 var selectedobj=document.getElementById('showthis');

  if(selectedobj.className=='hide'){  //check if classname is hide 
    selectedobj.style.display = "block";
    selectedobj.readOnly=true;
    selectedobj.className ='show';
  }else{
    selectedobj.style.display = "none";
    selectedobj.className ='hide';
 }
}

为您的html textarea添加隐藏类。

HTML

 <textarea id="showthis" style="display:none" class="hide">dfdsfsfasdfdsfsfasdfssdfsfasf</textarea>   // add a class hide

Answer 2

虽然您要设置visibility:visible，但该元素仍具有样式属性display:none，因此不会显示。

您应该使用visibility覆盖display属性，而不是设置block属性。

将您的功能更改为：

function myfunc2() {
      document.getElementById('showthis').style.display = "block";
}

Answer 3

您想要更改display属性，而不是visibility属性，因此请更换以下行：

document.getElementById('showthis').style.visibility="visible"

这个：

document.getElementById('showthis').style.display="block"

见工作demo。

Answer 4

CSS属性display和visibility不同。

如果你想简单地使元素不可见但保留它在布局中占据的位置，留下一个空白区域，那么使用visibility会更有意义：

<textarea id="showthis" style="visibility:hidden">dfdsfsfasdfdsfsfasdfssdfsfasf</textarea>

http://www.w3.org/wiki/CSS/Properties/visibility

另一方面，使用display将隐藏元素，但也会将其从布局中删除：

function myfunc2() {
    document.getElementById('showthis').style.display="block";
}

http://www.w3.org/wiki/CSS/Properties/display

Answer 5

你错过了

在

document.getElementById('showthis').style.visibility="visible"

您还需要更改display.style而不是元素的可见性

尝试这个

document.getElementById('showthis').style.display = "block";

或将visibility =“false”属性附加到textarea

单击标签后需要显示textarea

5 个答案: