Geek Answers Handbook

Width of element considering quirks mode in javascript?

I have been looking through all the popular js libraries, but I cannot find one that has a width function for the DOM element that actually takes into account the quirks mode in Internet Explorer. The problem is that padding and borders are not counted in width when quirks mode is enabled. As far as I can tell, this happens when doctype is not taken into account, or doctype is installed in html 3.2.

Obviously, I could just set doctype to standards, but this script can be implemented anywhere, so I can't control doctype.

To break the problem into smaller parts:

1) How do you detect fad mode? 2) What is the best way to extract border and padding from an element for compensation?

An example with a prototype:

<html> <head> </head> <body> <div id="mydiv" style="width: 250px; pading-left: 1px; border: 2px black solid">hello</div> <script> alert($('mydiv').getWidth()) </script> </body> </html>

result:

253 (ff) 250 (i.e.)

Thanks in advance!

+6
javascript html css
source share
3 answers

@one

 document.compatMode

"CSS1Compat" means "standard mode" and "BackCompat" means "quirks mode".

@ 2

The offsetWidth property of HTML elements gives the width on the screen in pixels.

 <div id="mydiv" style="width: 250px; padding-left: 1px; border: 2px black solid">hello</div> document.getElementById('mydiv').offsetWidth //255 (standards) 250 (quirks)

A function that compensates for the width of IE quirksmode should check the rendering mode, then add borders and padding to the width;

 function compensateWidth( el, targetWidth ){ var removeUnit = function( str ){ if( str.indexOf('px') ){ return str.replace('px','') * 1; } else { //because won't work for other units... one may wish to implement return 0; } } if(document.compatMode && document.compatMode=="BackCompat"){ if(targetWidth && el.offsetWidth < targetWidth){ el.style.width = targetWidth; } else if (el.currentStyle){ var borders = removeUnit(el.currentStyle['borderLeftWidth']) + removeUnit(el.currentStyle['borderRightWidth']); var paddings = removeUnit(el.currentStyle['paddingLeft']) + removeUnit(el.currentStyle['paddingRight']); el.style.width = el.offsetWidth + borders + paddings +'px'; } } }

Now there are two ways to use it:

 var div = document.getElementById('mydiv') // will try to calculate target width, but won't be able to work with units other than px compensateWidth( div ); //if you know what the width should be in standards mode compensateWidth( div, 254 );
+2
source share

The library probably speaks of truth. The problem is not that the readings are incorporated, but that the acutal display is installed. As an example, try:

 <div id="mydiv" style="width: 100px; border-left: 100px black solid;">&nbsp;</div>

then try changing the text inside the div to see what happens. IE will display different values ​​depending on the text inside, while FF will display correctly. IE is trying to fill 100px + something in 100px space with different results.

jQuery has two methods for width: .width and .outerWidth..outerWidth will return the entire width of the element. It also has the ability to get all other properties (indents, borders, etc.), as in the example below:

 $(document).ready(function() { alert("width=" + $('#mydiv').width() + " outerWidth=" + $('#mydiv').outerWidth() + " borderLeftWidth=" + $('#mydiv').css("borderLeftWidth")) });
+1
source share
 javascript:(function(){ var mode=document.compatmode,m;if(mode){ if(mode=='BackCompat')m='quirks'; else if(mode=='CSS1Compat')m='Standard'; else m='Almost Standard'; alert('The page is rendering in '+m+' mode.'); } })();

this code will determine your mode.

IE will also go into quirks mode if NOTHING, but doctype is on the first line. Even an empty first line with doctype in the second line will cause quirks mode.

+1
source share

More articles:


All Articles