Question

我想使用JQuery更改CSS属性。我已经在SO中尝试了几个示例，但无法使其正常工作。

我尝试过的事情（numberHours是之前定义的变量）：

$(".cd-schedule .events .top-info").css("height", 1000 / numberHours + "px");

我还尝试了3条单独的指令，每个css类一个，但也没有用。

这是我的CSS代码：

@media only screen and (min-width: 800px) {
  .cd-schedule .events .top-info {
    display: table;
    height: 50px; /*<-- The property I want to change*/
    border-bottom: 1px solid #EAEAEA;
    padding: 0;
  }
}

Answer 1

您可以使用CSS变量（自定义属性）代替jQuery来更新该值，例如

Codepen demo

CSS

:root {
   --infoheight: 50px;
}

.top-info {
    display: table;
    border-bottom: 1px solid #9bc;
    padding: 0;    
    height: var(--infoheight); 
    transition: height 1s 0s;
}

JS

let root = document.documentElement;
let numberHours = 5;

document.getElementById('btt').addEventListener('click', function() {
   root.style.setProperty('--infoheight', 1000 / numberHours + 'px')   
});

Answer 2

$('.myBtn').click(function(){
    $('.mydiv').css('height','100px');
});

.mydiv{
height:50px;
width:50px;
background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='mydiv'></div>
<br>
<button class='myBtn'>Click to change height</button>

Answer 3

另一个高度设置为float-point-px / integer-px值的演示，其计算的CSS属性与样式属性。通常，我更喜欢使用整数像素值，但是浮点数似乎很好用。只要确保numberHours永远不会为零即可。 https://codepen.io/anon/pen/zyVzZM

Answer 4

您可以在设置高度之前创建变量newHeight。因此，在查询中，您将使用变量而不是JS文本。

var numberHours = 100;
var newHeight = 1000 / numberHours + "px";
$(".cd-schedule .events .top-info").click(function () {
  $(".cd-schedule .events .top-info").css("height", newHeight);
});

.top-info {
  background: black;
  height: 100px;
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cd-schedule">
  <div class="events">
    <div class="top-info"></div>
  </div>
</div>

使用JQuery更改CSS属性

4 个答案: