Ширина элемента, учитывающего режим причуд в javascript? - PullRequest
Новая
       8

Ширина элемента, учитывающего режим причуд в javascript?

6 голосов
/ 21 октября 2008

Я сканировал все популярные библиотеки js, но не могу найти библиотеку с функцией ширины для элемента DOM, которая фактически учитывает режим причуд в Internet Explorer. Проблема в том, что отступы и границы не учитываются в ширине, когда задействован режим причуд. Насколько я могу судить, это происходит, когда тип документа не указан или для типа документа установлено значение html 3.2.

Очевидно, я мог бы просто установить тип документа в соответствии со стандартами, но этот сценарий может быть встроен где угодно, поэтому я не могу контролировать этот тип документа.

Чтобы разбить проблему на более мелкие части:

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 (то есть)

Заранее спасибо!

Ответы [ 3 ]

2 голосов
/ 21 октября 2008

@ 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)

Функция, которая компенсирует ширину для quirksmode IE, должна проверить режим рендеринга, затем добавить границы и отступы к ширине; 

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 );
1 голос
/ 21 октября 2008 
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 во второй строке вызовет режим причуд.

1 голос
/ 21 октября 2008

Библиотека, вероятно, говорит правду. Проблема не в том, что показания неверны, а в том, что показание на экране неверно. В качестве примера попробуйте: 

<div id="mydiv" style="width: 100px; border-left: 100px black solid;">&nbsp;</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"))
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...