jQuery 中的 CSS 属性答案

【问题标题】：CSS property in jQueryjQuery 中的 CSS 属性
【发布时间】：2021-09-20 20:41:20
【问题描述】：

有以下几段代码

$('.catalogbutton').on('click', function(event) {
  console.log('Before');
  $('#dropdownwindow').style.marginRight = "40%";
  $('#dropdownwindow').style.display = "block";
  $('#dropdownwindow').style.height = "100%";
  console.log('After');

})

#pageHeader {
  grid-area: header;
  width: 100%;
  /*
    display: flex;
    justify-content: space-between;
    align-items: center;
    */
}

#pageHeader .headerinsides {
  padding-left: 65px;
  padding-right: 65px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font: 18px "PT Sans", sans-serif;
  /*align-items: center;*/
}

.icon {
  align-self: center;
  /*padding-left: 74px;*/
  /*padding-right: 74px;*/
}

#pageHeader .labelforicon {
  padding-left: 10px;
  /*padding-right: auto;*/
  /*width: 1200px;*/
  align-self: center;
  /*flex: 34px;*/
  /*border-bottom: 2.5px dotted black;*/
  font: 18px "PT Sans", sans-serif;
  /*white-space: pre;*/
}

.flexcitylink {
  /*margin-left: 74px;*/
  display: flex;
  flex: 60px;
  /*font: 18px, PT Sans,sans-serif;*/
  width: 100%;
}

.flexcitylinkwrapper {
  display: flex;
}


/*
.headerparamswrapper {
    display: flex;
    margin-left: auto;
}
*/

.intermediatespace {
  margin-left: auto;
  flex: 30%;
}

.telephonenumber {
  margin-left: auto;
  flex: 30%;
}

.addressandworkschedule {
  margin-left: auto;
  flex: 20%;
}

.payment {
  margin-left: auto;
  flex: 10%;
}

.delivery {
  margin-left: auto;
  flex: 10%;
}

#pageHeader .headerinsidessecondrow {
  padding-left: 0px;
  padding-right: 0px;
  width: 100%;
  height: 57px;
  display: flex;
  /*justify-content: space-between;*/
  align-items: center;
  font: 16px "PT Sans", sans-serif;
}

.catalogbutton {
  margin-left: auto;
  margin-right: auto;
  flex: 22.5%;
  height: 41px;
}

.betweenspace {
  flex: 7.5%;
}

.inputsearch {
  margin-left: auto;
  flex: 80%;
  height: 41px;
  /*border-bottom-width: 0px;*/
  /*height: 32px;*/
}

.searchbutton {
  margin-left: auto;
  flex: 20%;
  height: 41px;
}

.findinfo {
  flex: 40%;
  display: flex;
  justify-content: stretch;
}

.secondbetweenspace {
  flex: 10%;
}

.loginandsignup {
  margin-left: auto;
  /*margin-right: 0px;*/
  display: flex;
  align-items: center;
  flex: 10%;
  display: flex;
  justify-content: flex-start;
  align-self: center;
}

.basket {
  margin-left: auto;
  /*margin-right: 0px;*/
  display: flex;
  align-items: center;
  flex: 10%;
  display: flex;
  justify-content: flex-start;
  align-self: center;
}

#dropdownwindow {
  display: none;
  left: 0;
  margin-right: 100%;
  height: 100%;
}

<div id="dropdownwindow">
</div>
<header id="pageHeader">
  <div class="headerinsides">
    <span class="flexcitylinkwrapper">
        <a href="#" class="flexcitylink">
                <span class="icon">
                        <svg aria-hidden="true" class="Sg" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z" fill="currentColor"></path></svg>
                </span>
    <span class="labelforicon">
                 Краснодар
                </span>
    </a>
    </span>
    <span class="intermediatespace">
                </span>
    <span class="telephonenumber">
                8 (800) 600 3900 (круглосуточно)
                </span>
    <span class="addressandworkschedule">
                    Адрес и график работы
                </span>
    <span class="payment">
                    Оплата
                </span>
    <span class="delivery">
                    Доставка
                </span>
  </div>
  <div class="headerinsidessecondrow">
    <button class="catalogbutton">Каталог товаров</button>

    <span class="betweenspace">
</span>

    <span class="findinfo">
        <input placeholder="Поиск среди 10000 товаров" class="inputsearch"></input>
        <button class="searchbutton">Найти</button>
</span>

    <span class="secondbetweenspace">
</span>

    <span class="loginandsignup">
    <span class="loginsignupimg">
        <img src="../images/header_profile-icon.png">
    </span>
    <span class="loginsignuptext">
        Вход и регистрация
    </span>
    </span>

    <span class="basket">
    <span class="loginsignupimg">
        <img src="../images/header_cart-icon.png">
    </span>
    <span class="loginsignuptext">
        Корзина
    </span>
    </span>
  </div>

因此，当单击具有.catalogbutton 类的按钮时，不会出现#dropdownwindow 块。告诉我如何实现块显示。给出错误信息

【问题讨论】：

标签： javascript html css web layout

【解决方案1】：

要更改元素的样式，这是 jquery 的 API

$('selector').css({
  marginRight: '40%', 
  display: 'block',
  height: '100%'
});

要了解为什么会发生此错误，您可以记录 $('selector') 并查看记录的语句中没有名为 style 的属性

【讨论】：

【解决方案2】：

由于您使用的是 JQuery，因此最好对元素使用 css() 方法。检查下面修改的sn-p。它运行良好，只是样式多一点。

$(document).ready(function() {
      $('.catalogbutton').on('click', function(event) {
          $('#dropdownwindow').css('marginRight', "40%");
          $('#dropdownwindow').css('display' ,"block");
          $('#dropdownwindow').css('height', "100%");
          console.log('After');

        })
      });

#pageHeader {
  grid-area: header;
  width: 100%;
  /*
    display: flex;
    justify-content: space-between;
    align-items: center;
    */
}

#pageHeader .headerinsides {
  padding-left: 65px;
  padding-right: 65px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font: 18px "PT Sans", sans-serif;
  /*align-items: center;*/
}

.icon {
  align-self: center;
  /*padding-left: 74px;*/
  /*padding-right: 74px;*/
}

#pageHeader .labelforicon {
  padding-left: 10px;
  /*padding-right: auto;*/
  /*width: 1200px;*/
  align-self: center;
  /*flex: 34px;*/
  /*border-bottom: 2.5px dotted black;*/
  font: 18px "PT Sans", sans-serif;
  /*white-space: pre;*/
}

.flexcitylink {
  /*margin-left: 74px;*/
  display: flex;
  flex: 60px;
  /*font: 18px, PT Sans,sans-serif;*/
  width: 100%;
}

.flexcitylinkwrapper {
  display: flex;
}


/*
.headerparamswrapper {
    display: flex;
    margin-left: auto;
}
*/

.intermediatespace {
  margin-left: auto;
  flex: 30%;
}

.telephonenumber {
  margin-left: auto;
  flex: 30%;
}

.addressandworkschedule {
  margin-left: auto;
  flex: 20%;
}

.payment {
  margin-left: auto;
  flex: 10%;
}

.delivery {
  margin-left: auto;
  flex: 10%;
}

#pageHeader .headerinsidessecondrow {
  padding-left: 0px;
  padding-right: 0px;
  width: 100%;
  height: 57px;
  display: flex;
  /*justify-content: space-between;*/
  align-items: center;
  font: 16px "PT Sans", sans-serif;
}

.catalogbutton {
  margin-left: auto;
  margin-right: auto;
  flex: 22.5%;
  height: 41px;
}

.betweenspace {
  flex: 7.5%;
}

.inputsearch {
  margin-left: auto;
  flex: 80%;
  height: 41px;
  /*border-bottom-width: 0px;*/
  /*height: 32px;*/
}

.searchbutton {
  margin-left: auto;
  flex: 20%;
  height: 41px;
}

.findinfo {
  flex: 40%;
  display: flex;
  justify-content: stretch;
}

.secondbetweenspace {
  flex: 10%;
}

.loginandsignup {
  margin-left: auto;
  /*margin-right: 0px;*/
  display: flex;
  align-items: center;
  flex: 10%;
  display: flex;
  justify-content: flex-start;
  align-self: center;
}

.basket {
  margin-left: auto;
  /*margin-right: 0px;*/
  display: flex;
  align-items: center;
  flex: 10%;
  display: flex;
  justify-content: flex-start;
  align-self: center;
}

#dropdownwindow {
  display: none;
  left: 0;
  margin-right: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dropdownwindow">
<p>Drop Down</p>
</div>
<header id="pageHeader">
  <div class="headerinsides">
    <span class="flexcitylinkwrapper">
        <a href="#" class="flexcitylink">
                <span class="icon">
                        <svg aria-hidden="true" class="Sg" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z" fill="currentColor"></path></svg>
                </span>
    <span class="labelforicon">
                 Краснодар
                </span>
    </a>
    </span>
    <span class="intermediatespace">
                </span>
    <span class="telephonenumber">
                8 (800) 600 3900 (круглосуточно)
                </span>
    <span class="addressandworkschedule">
                    Адрес и график работы
                </span>
    <span class="payment">
                    Оплата
                </span>
    <span class="delivery">
                    Доставка
                </span>
  </div>
  <div class="headerinsidessecondrow">
    <button class="catalogbutton">Каталог товаров</button>

    <span class="betweenspace">
</span>

    <span class="findinfo">
        <input placeholder="Поиск среди 10000 товаров" class="inputsearch"></input>
        <button class="searchbutton">Найти</button>
</span>

    <span class="secondbetweenspace">
</span>

    <span class="loginandsignup">
    <span class="loginsignupimg">
        <img src="../images/header_profile-icon.png">
    </span>
    <span class="loginsignuptext">
        Вход и регистрация
    </span>
    </span>

    <span class="basket">
    <span class="loginsignupimg">
        <img src="../images/header_cart-icon.png">
    </span>
    <span class="loginsignuptext">
        Корзина
    </span>
    </span>
  </div>

希望这能解决您的问题！

【讨论】：

【解决方案3】：

你在混合东西。 style 是 DOM 元素的属性，$() 返回完全不同类型的对象（特定于 jQuery）。 style 不是该对象的属性，因此是未定义的。

使用 jQuery 特有的 .css() 方法。

语法：css("propertyname","value")

如下改变你的陈述：

$('#dropdownWindow).css("marginRight","40%");

【讨论】：