how do i set style of element on content page from master page using java script

Question

I have a div element with id "dashbmaindivision" on my content page and i have another element on master page which onclick runs a java script function on the master page. the function is to add css style to the div element with id "dashbmaindivision" on my content page but is not working out

the name of my content page is dashboard

<!--this is my java script function my on master page-->

<script type="text/javascript">

function changNav() {            

document.dashboard.getElementById("dashbmaindivison").style.backgroundColor ="red"
    }
 </script>

<!--this is my html of my master page-->

<div style="z-index:4">
     <a href="#" onclick="changNav()" id="openbtn" runat="server" style="font-size:x-large; color:white;" class="place-right"><span>&times</span></a>
    </div>

 <!--this is my html of my content page-->
<asp:content id="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div  id="dashbmaindivison" runat="server"> </div>
</asp:content>

i expect that the style which is the background color of my div element with id "dashbmaindivison" on the content page would change.

Answer 1

Try removing .dashboard .

document.getElementById("dashbmaindivison").style.backgroundColor = "red";

Answer 2

Your javascript is not working because your div is a server side control and you need to do this as below:

   var myDiv = document.getElementById("<%=dashbmaindivison.ClientID%>");
   myDiv.style.backgroundColor = "red";

or using jquery you can do as below:

$('[id$=dashbmaindivison]').css("backgroundColor", "red");