div ,get css attributes from java script

Question

hey there i want to change some css attributes from javascript

but i cant access css values for that div

here is what i have in my css file

#sidebar {
float: left;
width: 160px;
padding: 25px 10px 0 20px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

here is my html code for that div

 <div id="sidebar">
     <%@ include file="some_page.jsp" %>
 </div>

here is my javascript code on some click event

var element = document.getElementById('sidebar');
alert(element.style.length); //Will alert 0
alert(element.style.width);//Empty alert box

i want to change the width attribute , can u help me please ?

thank you

Use firebug and the console.log() instead of alert(), you'll get better messages in the Console tab of firebug. — greg0ire
– greg0ire, Commented Aug 17, 2010 at 17:49

user113716 · Accepted Answer · 2010-08-17 18:37:59Z

5

Try this code, based on the code from here: http://www.quirksmode.org/dom/getstyles.html

var sidebarWidth = getStyle('sidebar','width');

function getStyle(el,styleProp) {
    el = document.getElementById(el);
    return (el.currentStyle)
        ? el.currentStyle[styleProp] 
        : (window.getComputedStyle)
             ? document.defaultView.getComputedStyle(el,null)
                                    .getPropertyValue(styleProp)
             : 'unknown';
}

EDIT:

To give perhaps a more readable version of the code, this is closer to the quirksmode version. I had changed it to get rid of the unnecessary variables.

var sidebarWidth = getStyle('sidebar','width');

function getStyle(el,styleProp) {
    el = document.getElementById(el);
    var result;
    if(el.currentStyle) {
        result = el.currentStyle[styleProp];
    } else if (window.getComputedStyle) {
        result = document.defaultView.getComputedStyle(el,null)
                                    .getPropertyValue(styleProp);
    } else {
        result = 'unknown';
    }
    return result;
}

edited Aug 17, 2010 at 18:37

answered Aug 17, 2010 at 18:22

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user113716 Over a year ago

This is for getting the computed style of an element when no inline style has been added. To set a style, you either update its inline style attribute with element.style.width = "100px", or you create a stylesheet and append it to the document. Not sure what your exact situation is, but there should be lots of answers on SO that relate.

shay Over a year ago

ok the new example helped me to write the setStyle method for some reason,the methods wont pass the line,getElementById,any ideas? function setStyle(elementName,styleProp,styleValue) { alert('HERE SET'); var el = document.getElementById(elementName); alert(e1); if(el.currentStyle) { el.currentStyle[styleProp] = styleValue; } else if (window.getComputedStyle) { document.defaultView.getComputedStyle(el,null).setProperty(styleProp ,styleValue ,'important'); } else { alert("nothing to do"); } } setStyle('sidebar','width' ,'0px');

user113716 Over a year ago

@shay - If you're trying to update the style of an element, just set its style.whatever property. (By the way, in the code you posted, the second alert() was given e1 instead of el. Here's your function:

function setStyle(elementName, styleProp, styleValue) { document.getElementById(elementName).style[styleProp] = styleValue; } setStyle('sidebar', 'width', '0px');

Collectives™ on Stack Overflow

div ,get css attributes from java script

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related