Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts

    Another DOM Question

    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?

    D.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    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.

    Code:
    //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");

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    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.

    eg
    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

    D.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    How do you set the display when you click the button?

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    document.getElementById('back').style.display = 'inline';

    Is this wrong?

    D.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by daemonkin View Post
    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.

    Code:
    #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.removeAttribute("class");
    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().
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    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:

    PHP Code:
    <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';
    }
    </script> 
    it works but if I remove the initial style to the external CSS it does not work

    D.

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by daemonkin View Post
    it works but if I remove the initial style to the external CSS it does not work
    I 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?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en-Latn-US">
    	<head>
    
    		<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; }
    		</style>
    		<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);
    		</script>
    		<!--[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";
    						}
    					};
    				};
    			</script>
    		<![endif]-->
    
    	</head>
    	<body>
    		
    		<div><button>Show Paragraph</button></div>
    		<p>This is a paragraph. It exists for testing purposes.</p>
    
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •