Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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

share|improve this question
1  
Use firebug and the console.log() instead of alert(), you'll get better messages in the Console tab of firebug. – greg0ire Aug 17 '10 at 17:49

1 Answer

up vote 5 down vote accepted

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;
}​
share|improve this answer
working like charm where is the setStyle method ? – shay Aug 17 '10 at 18:29
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. – user113716 Aug 17 '10 at 18:32
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'); – shay Aug 17 '10 at 20:13
@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');​ – user113716 Aug 17 '10 at 20:33
thank you for your help,i will try this thirst thing tommarw – shay Aug 17 '10 at 22:14
show 2 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.