Установка свойств CSS с помощью JavaScript не работает в строгом режиме? - PullRequest
Новая
       9

Установка свойств CSS с помощью JavaScript не работает в строгом режиме?

1 голос
/ 28 января 2010

Мне стыдно признать, что я не могу найти совместимый со стандартами метод для изменения свойств CSS с помощью Javascript. Или, по крайней мере, я так полагаю из-за следующего:

Следующий фрагмент кода отлично работает в Firefox / WebKit без объявления DOCTYPE, но не работает с указанным типом документа (HTML 4 или 5): 

function setWindowSize(width, height)   {
    console.log("Syncing dimensions:",width,height);            // prints correct values
    var container = document.getElementById('canvasProxy');
    console.log(container);                                     // prints valid element
    console.log(container.style);                               // prints valid object
    container.style['width'] = width;
    container.style['height'] = height;
    console.log(container.style['width'], container.style['height']); // prints empty values
}

где холст прокси просто определяется как: 

<div id="canvasProxy"></div>

и не имеет стиля, связанного с ним. Приведенный выше код не выполняется до тех пор, пока не загрузится DOM.

style.setProperty и style.getPropertyCSSValue также не работают. Так что ... какая правильная форма? Я схожу с ума?

(держу пари, что jQuery справится с этим просто отлично, но я пытаюсь сохранить абсолютный минимум размера страницы в данном конкретном случае.)

Ответы [ 2 ]

4 голосов
/ 28 января 2010

Вы не говорите, какие значения вы передаете или что считаете правильным, но я бы дал хорошие шансы, что вы передаете целых , а не длины .

Для CSS требуются единицы измерения, отличные от 0. Большинство браузеров выполнят восстановление после ошибок (что находится в прямом противоречии со спецификацией CSS) и предполагают, что вы имеете в виду px, если не удается указать единицу ... но только в режиме Quirks.

0 голосов
/ 28 января 2010 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $('canvasProxy').css('width', 300);
    $('canvasProxy').css('height', 50);
</script>
...