Modifying CSS Styles using JQuery

Question

Modifying CSS Styles using JQuery

I've been attempting to use JQuery to change a CSS property without success, despite trying multiple solutions found on SO.

Here's what I've attempted (with numberHours being a previously defined variable):

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

Even breaking it down into three separate instructions for each css class didn't yield results.

This snippet shows my current 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;
  }
}

jquery css

Answer 1

Answer №1

Instead of relying on jQuery, consider using a CSS Variable (custom property) to dynamically update the value like this:

Check out this Codepen demo for reference

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

Instead of relying on jQuery, consider using a CSS Variable (custom property) to dynamically update the value like this:

Check out this Codepen demo for reference

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 3

Answer №2

$('#clickMe').on('click', function(){
    $('#content').css('font-size','20px');
});

#content{
font-size:16px;
color:blue;
}

<script src="https://cdn.jquery.com/jquery-3.5.1.min.js"></script>
<div id='content'>Change my font size</div>
<br>
<button id='clickMe'>Click to change font size</button>

Answer 4

$('#clickMe').on('click', function(){
    $('#content').css('font-size','20px');
});

#content{
font-size:16px;
color:blue;
}

<script src="https://cdn.jquery.com/jquery-3.5.1.min.js"></script>
<div id='content'>Change my font size</div>
<br>
<button id='clickMe'>Click to change font size</button>

Answer 5

Answer №3

An additional demonstration showcasing the use of floating-point-pixel/integer-pixel values for setting height and comparing computed CSS properties with style attributes. While I typically prefer using integer pixel values, floats also appear to function well. It is important to ensure that numberHours is never zero. Check out the demo here

Answer 6

An additional demonstration showcasing the use of floating-point-pixel/integer-pixel values for setting height and comparing computed CSS properties with style attributes. While I typically prefer using integer pixel values, floats also appear to function well. It is important to ensure that numberHours is never zero. Check out the demo here

Answer 7

Answer №4

Before setting the height, consider creating a variable called newHeight. This way, in your query, you can utilize a variable instead of plain 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>

Answer 8

Before setting the height, consider creating a variable called newHeight. This way, in your query, you can utilize a variable instead of plain 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>

Modifying CSS Styles using JQuery

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Bug in Responsive Mega Menu Detected

Attach functions to elements added dynamically

Organizing an array of objects within MUI cards based on social media platforms

Interested in retrieving the dynamically changing value of LocalStorage

When the div element reaches the top of the page, it sticks to the top and is only displayed when the user

Designed radio buttons failing to activate when focused using a keyboard

What is the method to retrieve content from a different domain using .load()?

Is there a maximum file size limit for uploads in jQuery when using ajax requests?

Looking for a list that you can edit with CSS styling?

Using dots instead of lines for the carousel indicators in PrimeNG

Exploring the functionalities of scss and minified files within Visual Studio 2017

Identify the class within a child division and include the class in a separate division

Is there a way to prevent the Pace js plugin from running on page load, but still have it execute during Ajax requests only?

What could be causing the closest() method in my JavaScript code to not locate the nearest class?

The CSS infinite animation becomes erratic and sluggish after a short period of time

Does running npm install automatically compile the library code as well?

Utilize the jQuery queue method to trigger an action following the completion of a toggleClass

What HTML template is your go-to when starting a new project?

The background color of social media links spills over onto other links, creating a messy overlap

Using JQuery to send files via $.ajax