Geek Answers Handbook

How can I get the width of a div that is written in CSS

I want the width of the div element to be specified by the developer. So if you write $('body').width() , it will give you the width in px , whether you specified it or not.

I need the width of the div specified in CSS / JavaScript, but not which jQuery computes (which was not actually specified, but was inherited).

If width is not specified then I need to know.

+6
source share
5 answers

In the code below, all stylesheets as well as the style property of the matching element will be scrolled. This function will return an array of width.

 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" );

Feed here

There is one problem that I see, although several selectors can be specified in the selector text.

 #id1, #id2, .class1 { // properties }

In these cases, the identifier passed as an argument will not match the selectorText property. Maybe someone can come up with a regex expression that matches the given id :)

+2
source 
 <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>

It is possible to duplicate with the percentage value of CSS rules in jQuery or Getting the values ​​of a global stylesheet in jQuery

+2
source

For the specified Javascript width, you can try the following:

document.getElementById("myDivElement").style.width

If the above value returns an empty string, it means that Javascript has not been specified.

For the rules defined using CSS, find the name of the class, 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; }
+1
source 
 document.getElementById('divid').style.width
0
source

You can use the clientWidth property, it calculates the actual width of the element, regardless of whether it is set via CSS or the natural flow of the document:

 document.getElementById('divId').clientWidth

If you need the full width of the content with the fields / 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

0
source

More articles:


All Articles