从JavaScript和代码后台访问<div>

Question

从JavaScript和代码后台访问<div>

3

我有一个样式为"display:none"的div。单击HTML按钮后，该div应变为可见：

function JSAdd() {
    document.getElementById('divDetail').style.display = "block";
}
    <div style="float:left">

    <div id="ctl00_MainContent_upnlLbRD">





            <select size="4" name="ctl00$MainContent$lbRD" id="ctl00_MainContent_lbRD" style="width:188px;">

    <option value="5">one</option>
    <option value="1">two</option>
</select>

    <input id="btnAdd" type="button" value="Добавить" onclick="JSAdd();" />
    <input id="btnEdit" type="button" value="Редактировать" onclick="JSEdit();" />
</div>
<div id="ctl00_MainContent_divDetail" style="display:none" clientidmode="static">
    <div id="ctl00_MainContent_upnlDescription">

            <div>

                <span id="ctl00_MainContent_lblDescription">Описание:</span>

                <input name="ctl00$MainContent$txtDescription" type="text" id="ctl00_MainContent_txtDescription" />  

                <span id="ctl00_MainContent_txtDescriptionRequiredFieldValidator" style="color:Red;visibility:hidden;">Описание является обязательным для заполнения</span>

            </div>

            <input type="submit" name="ctl00$MainContent$btnSave" value="Сохранить" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$btnSave&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_MainContent_btnSave" />

我需要能够从代码后端再次使div不可见。除非

标签带有runat="server"属性，否则我无法访问该

标签。但是，当我添加runat="server"属性时，按照上面javascript函数的方式按下按钮后

标签并没有变得可见。你能帮助我解决这个问题吗？

谢谢，
David

- David Shochet

你能粘贴你的HTML内容吗？ - AmGates

6个回答

3

使用 Panel，它会呈现为经典的 div。

<asp:Panel runat="server" ID="divDetail" ClientIDMode="Static" />

- Bazzz

请注意，这仅适用于ASP.NET 4。 - Abdul Munim

3

你有几个选项，可以使用 ClientIDMode = "Static" 或在运行时使用动态的 ClientID。这两个选项都能让你在服务器端访问对象。 动态：

 <div id="divDetail" runat="server" />
 //or
 <asp:panel id="divDetail" runat="server" />

  function JSAdd() {
    document.getElementById('<%= divDetail.ClientID %>').style.display = "block";
  }

  //to hide from code-beind
  divDetail.Attributes.Add("style","display:none;");

静态(.NET 4.0 +)：

 <div id="divDetail" runat="server" ClientIdMode="Static">
  //or
 <asp:panel id="divDetail" runat="server" ClientIdMode="Static" />

  function JSAdd() {
    document.getElementById('divDetail').style.display = "block";
  }

- rick schott

谢谢！对于动态的情况：这可以使div可见，但无法从代码后端使其再次不可见。对于静态的情况：div不知道ClientIdMode，可能是因为我使用的是.net 3.5。 - David Shochet

是的，ClientIDMode是.NET 4.0中的功能。 - rick schott

为了从代码后端隐藏，divDetail.Attributes.Add("style","display:none"); - rick schott

我尝试了一下，在页面源代码中可以看到display:none...但是div的内容仍然可见。我不明白。 - David Shochet

2

当在元素上应用runat="server"时，asp.net会通过混淆确保它具有唯一的ID。只需向asp.net请求实际客户端ID即可：

function JSAdd() {
    document.getElementById("<%=div1.ClientID%>").style.display = "block";
}

或者，您可以通过将以下内容添加到您的 div 中告诉 asp.net 留下您的 ID：

<div id="div1" runat="server" clientidmode="Static">

Resources:

ClientIdMode="Static" docs

- James Hill

谢谢！这个可以让div可见，但是无法从代码后端让它再次不可见。而且div不知道ClientIdMode，可能是因为我使用的是.net 3.5。 - David Shochet

@DavidShochet，ClientIdMode是.NET 4.0及以上版本的功能。要从服务器端隐藏div，请使用div的visible属性：div1.Visible = false;。 - James Hill

如果我这样做，就无法从JavaScript中再次将其可见，因为不可见的div将不存在。 - David Shochet

@DavidShochet，抱歉，脑子一片空白。div1.Style.Add("display", "none") - James Hill

1

在ASP.NET中，为了使ID唯一（如果加载多个控件并指定相同的ID），元素上的ID通常遵循类似于ctl00_container1_container2_controlID的约定，并且在调用control.ClientID时返回此内容。

如果您考虑这样一个情况，在服务器端存在相同的ID并且您在页面中加载了这两个控件，则可以考虑使用jQuery和runat="server"，只需将ID与结尾部分匹配即可使生活更轻松。

function JSAdd() {
    $("div[id$=divDetails]").show();
}

- Abdul Munim

1

最简单的技术是使用Javascript/Jquery更改Div的显示属性。如果不行，您可以使用以下代码。

<form method="post" runat="server">
    <div style = "display:none" id= "div1" runat ="server" >Hello I am visible</div>
    <asp:Button Text="display Div" runat ="server" ID ="btnDisplay" OnClick = "displayDiv" />
    <asp:Button Text="display Div" runat ="server" ID ="btnHideDiv" OnClick = "hideDiv" />
    </form>

代码如下

 protected void displayDiv(object sender, EventArgs e)
    {
        div1.Style.Clear();
        div1.Style.Add("display", "block");
    }
    protected void hideDiv(object sender, EventArgs e)
    {

        div1.Style.Clear();
        div1.Style.Add("display", "none");
    }

猜猜你找到解决方案了

- Sagar Kadam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Johnson · Accepted Answer

您可以通过添加runat="server"属性在代码后台访问一个div。但是，添加这个属性会改变您在JavaScript中访问元素的方式：

var el = document.getElementById("<%=div1.ClientID%>");
if (el){
    el.style.display = "none"; //hidden
}

有两种方法可以从代码后台调整可见性，但由于您在JavaScript中设置了display:none，因此您可能希望在代码后台使用相同的方法：

div1.Style["display"] = "block"; //visible

在代码后台中，您也可以将Visible属性设置为false，但这与不渲染元素的效果不同。编辑如果使用display:none仍然显示div，则可能是未关闭标记或引号影响了标记。请仔细检查并确保标记有效。