用javascript显示隐藏的div

时间:2011-11-22 16:04:11

标签: javascript css dojo

我有以下内容:

var test = dojo.byId("clientDivision");
test.style.display = 'block';

在作为" onChange"的一部分被调用的函数中选择。

这是我想要显示的div:

<tr id="divisionInputRow" name="divisionInputRow">
<div id="clientDivisionDiv" >
    <td><label>Org:</label></td>
    <td name="inputDivisionCell" id="inputDivisionCell" class="inputData">

        <div dojoType="customdojo.stores.QueryReadStore" jsId="divisionStore"
        queryTable="" url="/SkillsDB/autocomplete/buildClientDivisionList"
        requestMethod="post"></div>
        <select id="clientDivision" name="clientDivision.name" style ="display:none"
            value="${project?.clientDivision?.encodeAsHTML()}"
            dojoType="dijit.form.ComboBox" pageSize="15"
            onChange="setCbHiddenId(this, 'clientDivision.id')"
            required="true"
            invalidMessage="Invalid Client Division"
            promptMessage="Enter client division for this project">
        </select>
        <input type="hidden" id="clientDivision.id" name="clientDivision.id" value='${project?.clientDivision?.id}' />          
    </td>
</div>
</tr>

如您所见,有一个选择

 <select id="clientDivision" name="clientDivision.name" style ="display:none"

我明确地将样式设置为&#34; display:none&#34;这样当页面加载时它就会被隐藏,我只是想在事件发生后取消隐藏它。

但是,函数中的代码似乎没有做任何事情。

由于

1 个答案:

答案 0 :(得分:4)

当dojo解析您的文档时,<select>会变成几个标记,看起来像这样:

<div widgetid="clientDivision" style="display: none;" id="widget_clientDivision" role="combobox">
  <div class="dijitReset dijitRight dijitButtonNode dijitArrowButton ...>
    <input class="dijitReset dijitInputField dijitArrowButtonInner" ...>
  </div>
  ...
  <div class="dijitReset dijitInputField dijitInputContainer">
    <input value="${project?.clientDivision?.encodeAsHTML()}" id="clientDivision"
        name="clientDivision.name" type="text">
  </div>
</div>

请注意,ID为“clientDivision”的DOM节点现在隐藏在标记汤的深处。这就是为什么隐藏/取消隐藏它没有意义。

此时你的组合框是一个小部件,因此将它视为一个DOM节点(即使它在技术上仍然由DOM节点组成)也不起作用。

您可以隐藏窗口小部件的最外层DOM节点,如下所示:

dijit.byId("clientDivision").domNode.style.display = "none";

请注意,您必须使用dijit.byId(不是dojo.byId,这仅适用于DOM节点,而不是小部件),并且您必须使用其domNode成员(这是dijit的最外层) DOM节点)。