javascript меняет идентификатор тела (с помощью css) динамически в зависимости от размера окна браузера

Question

Вот что у меня есть, но оно не работает:

 if(window.width() < 1000)
document.getElementsByTagName('body')[0].id="be"
else
document.getElementsByTagName('body')[0].id="bd"
;

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

По сути, я хочу присвоить тэгу BODY веб-сайта другой идентификатор, если размер окна браузера меньше 1000 пикселей.

Answer 1

Вот, пожалуйста:

document.body.id = window.innerWidth < 1000 ? 'be' : 'bd';

---

Поместите этот код внизу вашей страницы:

<script>
    function setBodyId() {
        document.body.id = window.innerWidth < 1000 ? 'be' : 'bd';
    }           
    window.onload = setBodyId;
    window.onresize = setBodyId;
</script>

Демонстрационная версия: http://jsfiddle.net/simevidas/THqXB/

Answer 2

Я рекомендую использовать jQuery, библиотеку JavaScript. Это решает много несовместимости браузера. Например, свойства innerWidth и outerWidth не поддерживаются в IE.

Это будет работать кросс-браузер:

$(function(){
    $("body").attr("id", $(window).width() < 1000 ? "be" : "bd");
});

Если вы хотите, чтобы оно изменялось при изменении размера окна, вам нужно добавить прослушиватель событий в событие изменения размера окна:

$(window).resize(function(){
    $("body").attr("id", $(this).width() < 1000 ? "be" : "bd");
});

Answer 3

window.width() не является функцией.Вместо этого используйте window.innerWidth или window.outerWidth.(проверьте совместимость браузера)

Answer 4

Вы можете сделать это с помощью JavaScript, но оптимальным решением является использование CSS Media Queries для таких сценариев.

см.> CSS медиазапросы при изменении размера браузера?