Как я могу изменить высоту нескольких классов одним классом?

Question

Как я могу изменить высоту нескольких классов одним классом?

0

для всех классов ниже я установил фиксированную высоту 120 пикселей. Есть ли способ контролировать высоту всех из них одним классом (классом или чем-то еще)? Я знаю, что могу делать.header,.logo,.etc {height: 120px} и удалять высоту из всех отдельных элементов, но это все равно не будет выглядеть как наиболее эффективное решение. благодаря

.header {
    width: 100%;
    height: 120px;
    background: #fff;
    color: #124191;
    font-weight: 300;
    font-size: 28px;
    display: table;
    position: fixed;
    z-index: 999999;
}

.logo {
    vertical-align: middle;
    line-height: 120px; /* this is set to same height as the div */
    left:0;
    height:120px;
    color: #333;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -1px;
    margin-left: 60px;
}

 .drop_menu {
    background:red;
    padding:0;
    margin:0;
    list-style-type:none;
    height:120px;
    right: 0;
    display: table;
    z-index: 3000;
    display: table-cell;
    vertical-align: middle;
    right: 0;
}

Greg 30 дек. 2013, в 21:12

Источник

0

Проверьте: http://stackoverflow.com/questions/8148310/jquery-if-scroll-is-a-termin-amount-of-pixels
Jayaram R Pai 30 дек. 2013, в 20:05

Теги:

html

css

2 ответа

0

вы можете дать один класс всем трем элементам в html, например

<div class="logo some_other_class">
<div class="header some_other_class">
<div class="dropmenu some_other_class">

и если вы используете jquery, вы можете изменить высоту, например:

$(".some_other_class").css("height", "80px");

user2432612 30 дек. 2013, в 18:07

Ещё вопросы

Проверьте: http://stackoverflow.com/questions/8148310/jquery-if-scroll-is-a-termin-amount-of-pixels

hkk · Accepted Answer · 2013-12-30T18-51-00.000Z

Для этого вам придется использовать javascript, потому что CSS просто не будет охватывать тип взаимодействия, которое вы хотите. Прежде всего, если вы хотите одновременно установить высоту нескольких классов на одно значение, у вас есть два варианта:

Измените высоту каждого отдельного класса с помощью Javascript или jQuery. Например: $(".header,.logo,.dropmenu").height("80px"); ,
Сделайте переключение нового класса, который применяется ко всем элементам. Например, если ваш класс был определен как newClass {height: 80px;}, то вы могли бы сделать $(".header,.logo,.dropmenu").toggleClass("newClass");

См. Эту ссылку для получения дополнительной информации о нескольких селекторах, и эту ссылку для получения дополнительной информации об изменении высоты и, наконец, эту ссылку для получения дополнительной информации о переключении класса с помощью jQuery. Конечно, есть способы сделать это с помощью только Javascript, но я лично предпочитаю jQuery, потому что это упрощает все.

Что касается применения класса при прокрутке до определенной высоты, может потребоваться следующий код или что-то подобное:

$(".header, .logo, .dropmenu").scroll(function(){
    if ($(".header, .logo, .dropmenu").scrollTop > 20){
      $(".header, .logo, .dropmenu").toggleClass("newClass");
    }
});