View Full Version : Another DOM Question

06-19-2007, 04:47 PM
I have defined div styles inline and when I use DOM to change style display from none to inline/bloc it works fine.

However if I define the style in my CSS the DOM manipulation is ignored. Am I doing something wrong or is this a common occurrence?


06-19-2007, 05:10 PM
You mean when the display property is defined in the CSS, object.style.display shows nothing? In IE, you need to use object.currentStyle.display, and window.getComputedStyle for W3C DOM. You can have a reusable function that incorporates both method.

//from http://www.oreillynet.com/pub/a/javascript/excerpt/JSDHTMLCkbk_chap5/index5.html
function getElementStyle(elemID, IEStyleProp, CSSStyleProp) {
var elem = document.getElementById(elemID);
if (elem.currentStyle) {
return elem.currentStyle[IEStyleProp];
} else if (window.getComputedStyle) {
var compStyle = window.getComputedStyle(elem, "");
return compStyle.getPropertyValue(CSSStyleProp);
return "";

//sample usage
var divColor = getElementStyle("myDiv", "backgroundColor", "background-color");

06-19-2007, 05:16 PM
Hi Glenn,

What I mean is that when I set the display in CSS it is taken up by the page but when I try and change the style through DOM it is ignored/overlooked.

div#para1 and div#para2 are display: none;

They are now not visible on page.

When I click next button (as you previously gave me IE compatible code for) div#para2 should now be display: inline; but this does not happen

I will try what you gave above


06-19-2007, 05:19 PM
How do you set the display when you click the button?

06-19-2007, 05:35 PM
document.getElementById('back').style.display = 'inline';

Is this wrong?


06-19-2007, 08:54 PM
document.getElementById('back').style.display = 'inline';I donít know if that is part of the DOM.

Either way, I would manipulate class names instead.

#back { display: inline; }
// If the content needs to be visible with JavaScript disabled, you probably want to default to a display value thatís visible.
class-name { display: none !important; }
// Remember to use class names that describe content rather than presentation.

element = document.getElementById("back");

/* Add a class (preferred methods).
element.setAttribute("class", "class-name");
element.setAttribute("class", element.getAttribute("class") + " class-name"); // Use if thereís are multiple classes applied.

// Add a class (Internet Explorer‐compatible methods).
element.className = "class-name";
element.className = element.className + " class-name";

// Remove a class (preferred methods).
element.setAttribute("class", element.getAttribute("class").replace(/ ?class-name ?/); // Use if thereís are multiple classes applied.

// Remove a class (Internet Explorer‐compatible methods).
element.className = "";
element.className = element.className.replace(/ ?class-name ?/);Or you can do things using the CSS Object Model, like glenngv did. window.getComputedStyle() isnít entirely from the W3C DOM though; itís document.defaultView.getComputedStyle().

06-20-2007, 10:13 AM
I have been able to change the colour of text using:

document.getElementById('back').style.color = '#c00';

so I assumed the same would follow for style.display and it works inline but not from previously defined external CSS

eg if I define:

<div id="col1" style="display:none;">some text</div><input type="button" onclick="showText()" value="Show" />
<script type="text/javascript">
function showText(){
document.getElementById('col1').style.display= 'inline';

it works but if I remove the initial style to the external CSS it does not work


06-20-2007, 03:02 PM
it works but if I remove the initial style to the external CSS it does not workI would expect the code that youíve shown to work; you click the button and the div element becomes visible.

Perhaps the below example will help you?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

<html lang="en-Latn-US">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Demo CF116738 #2</title>
<meta name="Author" content="Patrick Garies">
<meta name="Created" content="2007-06-20">
<meta name="Revised" content="2007-06-20">
<style type="text/css" media="screen">
* { margin: 0; padding: 0; }
html { padding: 2em; background: #f7f7ee; color: black; font: 16px/1.2 sans-serif; }
div, p { text-align: center; }
button { display: none; margin: 0 0 2em; padding: 1em; background: #222; color: #ffe; line-height: 1; font-weight: bold; cursor: pointer; }
p { padding: 1em; background: #eee; }
p:hover { background: #ffe; }
<script type="application/ecmascript">
document.defaultView.addEventListener("load", function () {
var buttons = document.getElementsByTagName("button");
var paragraphs = document.getElementsByTagName("p");
buttons[0].style.setProperty("display", "inline", null);
paragraphs[0].style.setProperty("display", "none", null);
document.getElementsByTagName("button")[0].addEventListener("click", function () {
if (paragraphs[0].style.getPropertyValue("display") == "none") {
paragraphs[0].style.setProperty("display", "block", null);
buttons[0].firstChild.data = "Hide Paragraph";
else {
paragraphs[0].style.setProperty("display", "none", null);
buttons[0].firstChild.data = "Show Paragraph";
}, false);
}, false);
<!--[if IE]>
<script type="text/javascript">
window.onload = function () {
var buttons = document.getElementsByTagName("button");
var paragraphs = document.getElementsByTagName("p");
buttons[0].style.display = "inline";
paragraphs[0].style.display = "none";
document.getElementsByTagName("button")[0].onclick = function () {
if (paragraphs[0].style.display == "none") {
paragraphs[0].style.display = "block";
buttons[0].firstChild.data = "Hide Paragraph";
else {
paragraphs[0].style.display = "none";
buttons[0].firstChild.data = "Show Paragraph";


<div><button>Show Paragraph</button></div>
<p>This is a paragraph. It exists for testing purposes.</p>