Manipulate asp.net 'runat="server" ' html object in javascript

Alright, I know you can get information from an asp.net control with this code:

var element = document.getElementById('<%=myControl.ClientID%>'); 

However I am incapable of manipulating said html element after grabbing it in Javascript. What would I need to do to change the properties of something that is set to runat="server" in javascript?

Is it only possible through the server-side C#?

For further clarification I have a div that changes sizes via Javascript and am trying to get the mschart that exists in it's innerhtml to change it's height/width along with it. However the fact that it runs at the server causes the problems.

<div id="div0" style="background-color:Silver; position: absolute; top: 0px; left: 0px; width: 480px; height: 245px;">
            <asp:Chart ID="chart0" runat="server"  Height="245px" Width="480px" 
                    BackColor="220,开发者_运维百科 230, 242" BackGradientStyle="None" 
                        BackSecondaryColor="220, 230, 242">
            <BorderSkin PageColor="220, 230, 242" />
            </asp:Chart>
        </div>

Edit: ended up handling chart resizing in a through postback with query string, then grabbing those values in javascript on init and resizing the divs there.

---

It's a little unclear what you really mean. If you mean, you want to manipulate server side properties, or call server side functions, then you can't do that through javascript. You would need to use something like ajax or webmethods. If you mean that you want to modify it's client properties, like whether it's visible, or what data it contains then yes you can do that. But, you need to specify more information about what exactly you're trying to do.

EDIT:

Based on your updated information there's good news and bad news. Yes, you can change the size of the control on the client side, but that will only stretch the image. MSChart generates an image file that is downloaded. Stretching will result in poor quality.

You will need to regenerate the chart for your new size if stretching is not an option. That will require you to use some kind of ajax, or completely refresh the page.

---

Because the element has runat=server you would only be able to modify properties in code behind (the server side). The actual client side properties such as visibility can be changed via javascript though.

---

You should be able to edit the client-side properties of the "control" if that control translates to a simple HTML element. Sometimes a server-side property doesn't have a client-side analog, however.

One common thing to be aware of is if the control is not set to visible, then that means it's not rendered on the page at all; if that's the case, then you cannot access it through JavaScript.

---

if all you are trying to modify is the with and height of the object there is no reason why the following shouldn't work:

var element = document.getElementById('<%=myControl.ClientID%>'); 
element.style.height = divHeight;

Just look in the generated html that the control with that name is actually a div or an image (or something you can re-size), where you can set width and height on. I don't know what Chart control renders to. In any case, use Firebug to inspect the html elements in your page, and see how the changes you do in javascript influence the result.

In any case, keep in mind you can only set client properties in javascript. This means you are looking to set this on some div element, rather the the server side control. Knowing that the server side control does render to html, you should be able to achive what you want, one way or another.

---

My suggestion would be to write a script using jQuery. The thing it would use are the following in client script code:

1. Get the element which height you need.
2. Get the element which you want to manipulate.
3. Change the element height with the value from part 1.

If you think this would be a way to go and your new to jQuery, I can help you with some code for it.

---

I attempted to manipulate a control in jquery that contained the runat="server" attribute. I was unable to change it. As soon as I removed runat="server", I noticed the jquery changes occur.

You can test it out for yourself:

<asp:Label ID="myLabel">hello, warlord!</asp:Label>
<asp:Label ID="myLabel2" runat="server">hello, warlord!</asp:Label>
<script type="text/javascript">$("#myLabel").css("border", "3px solid red");</script>
<script type="text/javascript">$("#myLabel2").css("border", "3px solid red");</script>

---

I had the same issue, this usually happens when your html controls(with runat="server") are inside of a contentPlaceHolder. Here's what I did:

I changed:

document.getElementById("mypopup").style.visibility = "visible";

to:

document.getElementById("ctl00_ContentPlaceHolder1_mypopup").style.visibility = "visible";

When you view the page source code on the browser you'll see the name that your html control really has.

you can find more information on how to actually use properly the ClientID property here