I want width of a div element which is specified by developer. Means if you write $('body').width(), it will provide you width in px , whether you have specified it or not.
I need width of div specified in CSS/JavaScript but not which is calculated by jQuery (which was not actually specified but was inherited).
If not width is specified then I need to know.
The code below will loop through all stylesheets as well as the matching element's style property. This function will return an array of widths.
function getCSSWidths( id ) { var stylesheets = document.styleSheets; var widths = []; var styleWidth; // loop through each stylesheet $.each( stylesheets, function( i, sheet ) { var len = ( sheet.rules.length || sheet.cssRules.length ); var rules = sheet.rules || sheet.cssRules; // loop through rules for (var i=0; i < len; i++) { var rule = rules[i]; // if width is specified in css add to widths array if (rule.selectorText.toLowerCase() == "#" + id.toLowerCase() ) { widths.push( rule.style.getPropertyValue("width")); } } }); var el = document.getElementById( id ); // get width specified in the html style attribute if( el && el.style && el.style.width ) { widths.push( el.style.width ); } return widths; } getCSSWidths( "test" ); Fiddle here
There is one issue that I can see though as multiple selectors can be specified in the selectorText i.e.
#id1, #id2, .class1 { // properties } In these cases the id passed in as an argument will not match the selectorText property. Maybe someone can come up with a regex expression that will match the specified id :)
<style type="text/css"> .largeField { width: 65%; } </style> <script> var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules; for (var i=0; rules.length; i++) { var rule = rules[i]; if (rule.selectorText.toLowerCase() == ".largefield") { alert(rule.style.getPropertyValue("width")); } } </script> Possibly duplicate with get CSS rule's percentage value in jQuery or Getting values of global stylesheet in jQuery
For the Javascript specified width, you can try this:
document.getElementById("myDivElement").style.width
If the above returns an empty string, it means it has not been specified by Javascript.
As for rules specified through CSS, find the class name(s) of the element and then the rules specified for that class:
var className = document.getElementById("myDivElement").className;
var cssWidth = getWidthFromClassname(className);
Now you need to define getWidthFromClassname:
function getWidthFromClassname(className) { var reqWidth; var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules for(var x=0;x<classes.length;x++) { if(classes[x].selectorText==className) { reqWidth = classes[x].style.getPropertyValue("width"); break; } } return reqWidth; } 
document.getElementById('divid').style.width You could use the clientWidth property, it calculates the actual width of the element, regardless if set through CSS or if it's the natural flow of the document:
document.getElementById('divId').clientWidth If you want the full content width with margins/paddings/border you can use offsetWidth:
document.getElementById('divId').offsetWidth https://developer.mozilla.org/en-US/docs/DOM/element.offsetWidth
https://developer.mozilla.org/en-US/docs/DOM/element.clientWidth