Ширина элемента с учетом режима причуд в javascript?
Я просматривал все популярные библиотеки js, но не могу найти такую, которая имеет функцию ширины для элемента DOM, которая фактически учитывает режим причуд в Internet Explorer. Проблема в том, что отступы и границы не учитываются в ширине, когда включен режим причуд. Насколько я могу судить, это происходит, когда doctype не учитывается или для doctype установлено значение html 3.2.
Очевидно, я мог бы просто установить в doctype что-то совместимое со стандартами, но этот скрипт можно встроить где угодно, поэтому я не могу контролировать doctype.
Чтобы разбить проблему на более мелкие части:
1) Как вы определяете режим причуд? 2) Как лучше всего извлечь границу и отступы из элемента для компенсации?
Пример с прототипом:
<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>
результат:
253 (далее) 250 (т.е.)
Заранее спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Библиотека, вероятно, говорит правду. Проблема не в том, что показания неверны, а в том, что фактическое отображение неточно. В качестве примера попробуйте:
<div id = "mydiv" style = "width: 100px; border-left: 100px black solid;"> </div>
затем попробуйте изменить текст внутри div, чтобы увидеть, что происходит. IE будет отображать различные значения в зависимости от текста внутри, в то время как FF будет отображаться правильно. IE пытается заполнить 100px + что-то в 100px пространство с разными результатами.
jQuery имеет два метода для ширины: .width и .outerWidth. .outerWidth вернет полную ширину элемента. У него также есть возможность получить все другие свойства (отступы, границы и т. д.), Как в примере ниже:
$(document).ready(function() {
alert("width = " + $('#mydiv').width()
+ " outerWidth = " + $('#mydiv').outerWidth()
+ " borderLeftWidth = " + $('#mydiv').css("borderLeftWidth"))
});
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.');
}
})();
этот код определит режим для вас.
IE также перейдет в режим причуд, если НИЧЕГО, кроме doctype, находится в первой строке. Даже пустая первая строка с doctype во второй строке вызовет режим quirks.
@ 1
document.compatMode
«CSS1Compat» означает «стандартный режим», а «BackCompat» означает «режим причуд».
@ 2
Свойство offsetWidth элемента HTML дает его ширину на экране в пикселях.
<div id = "mydiv" style = "width: 250px; padding-left: 1px; border: 2px black solid">hello</div>
document.getElementById('mydiv').offsetWidth
//255 (standards) 250 (quirks)
Функция, которая компенсирует ширину для IE quirksmode, должна проверять режим рендеринга, а затем добавлять границы и отступы к ширине;
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';
}
}
}
Теперь его можно использовать двумя способами:
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 );
currentStyle - это версия getComputedStyle () для IE. Он возвращает фактическое значение данного свойства CSS. Подробнее читайте в статье PPK: quirksmode.org/dom/getstyles.html
С Prototype вы также можете использовать Element.getStyle ().
откуда берется атрибут currentStyle? Я пробую это в ff, и кажется, что это не определено