从aspx页面中的usercontrol访问id

Question

So i have the usercontrol named footer which contains the navigation to the website, I'm trying to append the active css class to the div in usercontrol so that the user

This is my footer.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Footer.ascx.cs" Inherits="UserControls_Footer" %>
<div id="bottom">
    <div class="Footer navbar-fixed-bottom">
        <div class="container">
          <div class="row"> 
            <button id="ImgOption1Guru" class="btn btn-large btn-block btn-primary" runat="server" type="button" onclick="location.href='Option1.aspx';">Option 1</button>
            <button id="ImgCmnyInfo" class="btn btn-large btn-block btn-primary" onclick="location.href='CompanyInfo.aspx';" runat="server" type="button">Info</button>
            <button id="ImgInteract" class="btn btn-large btn-block btn-primary" onclick="location.href='Interact.aspx';" runat="server" type="button">Interact</button>
            <button id="ImgActions" class="btn btn-large btn-block btn-primary" onclick="location.href='Actions.aspx';" runat="server" type="button"> Actions</button>
            <button id="ImgStatus" class="btn btn-large btn-block btn-primary" onclick="location.href='Status.aspx';" runat="server" type="button">Status</button>            
          </div>

        </div>

    </div>
</div>

I've used this footer in my aspx page via

<div id="footer"><ucl:Footer ID="foot" runat="server" /></div>

Now i want to add the css class active to the button id on their respective pages . So far i've tried adding the code down to the respective pages and it doesn't seem to work

<script type="text/javascript">
    var x = document.getElementById("ImgActions");
    x.classname += " " + active;
</script>

what should i do to access the id of tag in the usercontrol in my aspx page.

Answer 1

You need to use ClientID of the control because the id of control will be changed when html is generated by asp.net as you do not have ClientIDMode not set to static . also classname should be className

var x = document.getElementById("<%= ImgActions.ClientID %>");
x.className += " " + active;

ASP.NET provides multiple algorithms for how to generate the ClientID property value. You select which algorithm to use for a control by setting its ClientIDMode property. The algorithms are identified by the ClientIDMode enumeration, Reference.

You can use ClientIDMode static as you have javascript in different control that does not know ImgActions.

Html

<button id="ImgActions" ClientIDMode="static" class="btn btn-large btn-block btn-primary" onclick="location.href='Actions.aspx';" runat="server" type="button"> Actions</button>

Javascript

 var x = document.getElementById("ImgActions");
 x.className += " " + active;