0

当我单击一个标签时，应该在其下方显示一些 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 的新手。请有人帮我解决这个问题。

4

5 回答 5

6

尝试这个..

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

更新

检查类名（隐藏）..如果是..显示文本区域并命名它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
于 2012-11-28T11:05:08.837 回答
2

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

与其设置属性，不如使用visibility覆盖display属性block。

将您的功能更改为：

function myfunc2() {
      document.getElementById('showthis').style.display = "block";
}
于 2012-11-28T11:05:30.447 回答
0

CSS 的属性display和visibility是不同的。

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

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

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

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

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

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

于 2012-11-28T11:17:21.827 回答
0

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

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

对于这个：

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

请参阅工作演示。

于 2012-11-28T11:05:01.807 回答
-2

你错过了一个

;

上

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

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

试试这个

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

或将 visibility="false" 属性附加到您的 textarea

于 2012-11-28T11:05:22.853 回答