Question

对于下面的所有类我设置了120px的固定高度。有没有办法用一个单独的类（类或其他）控制所有这些的高度？我知道我可以做.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;
}

Answer 1

你将不得不使用javascript，因为CSS根本不会涵盖你想要的交互类型。首先，如果要同时将多个类的高度设置为一个值，则有两个选项：

使用Javascript或jQuery更改每个类的高度。例如：$(".header, .logo, .dropmenu").height("80px");。
切换适用于所有元素的新类。例如，如果您的班级定义为newClass {height: 80px;}，那么您可以$(".header, .logo, .dropmenu").toggleClass("newClass");

有关多个选择器的详细信息，请参阅this link;有关更改高度的详细信息，请参阅this link;有关使用jQuery切换类的详细信息，请参阅this link。当然，有一些方法只使用Javascript库存，但我个人更喜欢jQuery，因为它简化了很多事情。

至于将scrolled的课程应用于certain height，以下代码或类似内容就足够了：

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

Answer 2

你可以给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");

如何用一个单独的类更改几个类的高度？

2 个答案: