Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Use javascript to add style to div tag

Posted on 2011-09-22
7
314 Views
Last Modified: 2012-05-12
I have this html:

<div id="msg"><div id="msg1">Please agree with our terms of use to continue.<br /><div style="width:250px; height:100px; overflow:auto;">text goes here</div></div></div>

And I want to add      style="height:180px;"     to     <div id="msg">

I tried this:  document.getElementById("msg").style.height = "180px";

but there was not change, I'm thinking this is because there is no existing style element in the #msg tag. Do I need to adjust my javascript to add the style element before I can add things to it.

If needed the page I'm working on is here: http://97.65.85.25/rrcna/about-rrcna/book-orientation

Thanks for any help.
0
Comment
Question by:elliottbenzle
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 13

Expert Comment

by:themrrobert
ID: 36582223
in your style settings,

#msg {

display: block;
//Add this line
}

final result: (assuming that's the only place your style is defined for #msg)
#bdpopupmsg #msg{
width:100%;
display: block;
height:60px;
margin-left:auto;
margin-top:10px;
padding:10px;
}

Open in new window

0
 
LVL 3

Expert Comment

by:dkellner
ID: 36582246
document.getElementById("msg").style.height="180px"
0
 
LVL 3

Expert Comment

by:dkellner
ID: 36582251
Opppps
sorry
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 4

Expert Comment

by:jmnf
ID: 36582265
Your javascript seems correct.
Perhaps the style is not being rendered correctly for some other reason.
Hardcode the style and see if it shows the right height.

Also try it in chrome, opera or firefox with firebug and check all the styles being applied to that specific div.

<div id="msg" style="height:180px;">
</div>

Open in new window

0
 
LVL 51

Accepted Solution

by:
HainKurt earned 250 total points
ID: 36582292
it is working fine for me

just make sure you run that js code after the div element, not before... or use

<body onLoad="document.getElementById("msg").style.height = '180px';"  ... >

or create a function and call it from onLoad

<body onLoad="setHeight()"  ... >
<script>
function setHeight(){document.getElementById("msg").style.height = "180px";}
</script>


<div id="msg" style="border:1px solid silver;">
<div id="msg1">Please agree with our terms of use to continue.<br /><div style="width:250px; height:100px; overflow:auto;">text goes here</div></div>
</div>
zzzz
<script>
document.getElementById("msg").style.height = "180px";
</script>

Open in new window

0
 
LVL 4

Assisted Solution

by:jmnf
jmnf earned 250 total points
ID: 36582314
Or maybe your element (<div id="msg"> is being rendered after the javascript gets parsed, so at the moment of telling javascript to make the element some height, the element is non existent (yet), for this, try loading the script at the end of the body tag, right before </body>, just like you would in the head...

<script type="text/javascript">
    // javascript goes here
</script>
0
 
LVL 13

Expert Comment

by:themrrobert
ID: 36582520
Try my solution, and like someone else said, be sure that your javascript is being called AFTER the <div id="msg"> is loaded.

Best of luck
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question