Как я могу изменить создание jquery-div на другой метод

0

Я совершенно новый для практически всех веб-технологий, и сейчас я практикую на них.

На моей новой странице практики я создал несколько таких вещей (чтобы изменить высоту div в соответствии с высотой видового экрана):

<script>
<!--
 document.write('<div class=\"head\" id=\"head\" style=\"height:'+viewportheight/6+'px\">');
//-->
</script>
</div>

Я понимаю, что это ужасный код. Но это работает. К сожалению, метод jquery.css по некоторым причинам не работает. Я включил code.jquery.com/jquery-1.10.2.js, но этот не делает никакой работы:

$( 'body' ).css( {
    'width'   : viewportwidth + 'px',
    'height'  : viewportheight + 'px'
} );

Я уверен, что у двух варов высоты и ширины есть значения внутри них - я могу вывести их с помощью document.write(). Я также пытался использовать постоянные значения - никакого эффекта.

Итак, пожалуйста, можете ли вы любезно описать, как я могу создавать divs с динамическими значениями без использования сценария-тега каждый раз или как я должен правильно использовать метод.css?

Спасибо, и у вас приятные праздники!

  • 0
    Можете ли вы сделать JS скрипку?
Теги:

2 ответа

1
Лучший ответ

На моей новой странице практики я создал несколько таких вещей (чтобы изменить высоту div в соответствии с высотой видового экрана)

Зачем использовать jQuery или Javascript для этого??? Вы можете сделать это просто css следующим образом:

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
 /* style goes here
 ...
*/
}

В веб-разработке вы всегда можете добиться всего стиля html, выполняемого через jquery или JavaScript, если не css.... но использование его для базового стиля или просмотра браузера - это излишний... (например, вместо использования ракеты пистолета для достижения вашей цели)

Подробнее здесь

EDIT: (для ширины)

Чтобы понять, как работают медиа-запросы, проверьте эту скрипту

@media screen and (max-width : 1500px) {
    body {
        background: grey;
        border-top: 2px solid #DDDDDD;
    }
}
@media screen and (max-width:800px) {
    body {
        background: red;
        border-top: 2px solid #DDDDDD;
    }
}
@media screen and (max-width:400px) {
    body {
        background: black;
        border-top: 2px solid #DDDDDD;
    }
}

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

EDIT (для высоты)

демо здесь

html, body {
    /* set universal style */
    background-color:grey;
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
@media (max-height:600px) {
    body {
        background-color:red;
    }
    @media (max-height:400px) {
        body {
            background-color:yellow;
        }
        @media (max-height:200px) {
            body {
                background-color:black;
            }
        }
Поделиться
  • 0
    Я оставлю свой ответ, так как я думаю, что он отвечает на вопрос более прямо, но я думаю, что это лучший метод для решения проблемы. Если это имеет смысл ...
  • 0
    ОП изучает веб-технологии, ваше решение помогает ему в обучении, мое решение помогает ему узнать, что очевидно ... мы оба правы в своем отношении !! :)
Показать ещё 6 комментариев
0

Как насчет этого?

Javascript:

Это по существу выбирает элемент с id mydiv и устанавливает его height до 500 document.getElementById('mydiv').style.height="500px";

HTML:

 <div id="mydiv">My div!!</div>

Пример скрипта: http://jsfiddle.net/t84X9/

Поделиться
  • 0
    Я ve tried to use document.getElementById('header').style.height = viewportheight/6+"px". Header is my css-class name. I также пытался сделать это с getElementById ('. Header'), но безрезультатно :( Я делаю что-то не так.
  • 0
    хорошо, ваш пример кода выше , имеет Ид head , а не header . Это оно?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню