Ich möchte eine CSS-Eigenschaft mit JQuery ändern. Ich habe bereits mehrere Beispiele in SO ausprobiert, kann es aber nicht zum Laufen bringen.

Was ich versucht habe (numberHours ist eine zuvor definierte Variable):

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

Ich habe es auch in 3 separaten Anweisungen versucht, eine für jede CSS-Klasse, aber es hat auch nicht funktioniert.

Dies ist mein CSS-Code:

@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;
  }
}
0
newhouse-pt 18 Jän. 2019 im 12:31

4 Antworten

Beste Antwort

Anstelle von jQuery können Sie eine CSS-Variable (benutzerdefinierte Eigenschaft) verwenden, um diesen Wert zu aktualisieren, z.

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')   
});
0
Fabrizio Calderan 18 Jän. 2019 im 09:40
$('.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>
0
David Söderberg 18 Jän. 2019 im 09:42

Eine weitere Demo mit der Höhe als Gleitkomma-px / Ganzzahl-px-Wert und dem berechneten Attribut CSS-Eigenschaft vs. Stil. Im Allgemeinen würde ich es vorziehen, ganzzahlige Pixelwerte zu verwenden, aber Floats scheinen gut zu funktionieren. Stellen Sie einfach sicher, dass numberHours niemals Null ist. https://codepen.io/anon/pen/zyVzZM

0
Freddy 18 Jän. 2019 im 11:48

Sie können eine Variable newHeight erstellen, bevor Sie die Höhe einstellen. In Ihrer Abfrage verwenden Sie also eine Variable anstelle von JS-Text.

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>
0
ExEr7um 18 Jän. 2019 im 16:41