How can I dynamically change the css property using javascript and jquery

Question

How can I change the css properties of a H1 tag dynamically using js or jquery. I mean if suppose I have a H1 tag with class fh and another H1 tag with class sh how can I change the font-size, color seperatly. I have make one but not working. How can I achive that?

const inputs = document.querySelectorAll('.controls input');

function handleUpdate() {
  const suffix = this.dataset.sizing || '';
  document.documentElement.style.setProperty(`${this.name}`, this.value + suffix);
}

inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

Here is my fiddle

UPDATE : how can I do this by dynamically sensing the h1 or p tags in my fiddle there is a range slider I want that when I click on h1 the current value ( properties ) of my h1 come in the range sliders respectively and I can edit them

Answer 1

You can change css with like this in jQuery:

$("css-selector").css("property", "value");

You may use any css selector (# for ids, . for classes, etc).

EDIT (considering your request):

Take a look at this code. It's not entirely working, but it may give you an example of how to work with jQuery. You find css changes and events in it so try it out yourself.

const inputs = $(".contorl input");
let active = $(".fh");

$("#fontsize").on("input", function(){
 active.css("font-size", $("#fontsize").css("font-size"));
});

$("#fontcolor").on("input", function(){
 active.css("color", $("#fontcolor").css("color"));
});

$(".fp").click(function(){
 $("#fontcolor").val($(".fp").css("color"));
  $("#fontsize").val($(".fp").css("font-size"));
  active = $(".fp");
});

$(".sh").click(function(){
 $("#fontcolor").val($(".sh").css("color"));
  $("#fontsize").val($(".sh").css("font-size"));
  active = $(".fh");
});

$(".fh").click(function(){
 $("#fontcolor").val($(".fh").css("color"));
  $("#fontsize").val($(".fh").css("font-size"));
  active = $(".fh");
});

$(".sp").click(function(){
 $("#fontcolor").val($(".sp").css("color"));
  $("#fontsize").val($(".sp").css("font-size"));
  active = $(".sp");
});

.firstclass{ background-color:black;}
.secondclass {background-color:black;}
h1 {text-align:center;}
p {text-align:center;}

.fh {
  color:white;
  font-size:35px;
}
.fp {
  color:white;
  font-size:15px;
}
.sh {
  color:red;
  font-size:35px;
}
.sp {
  color:red;
  font-size:15px;
}

<div class="controls">
  <label for="fontsize">Font size:</label>
  <br>
  <input id="fontsize" type="range" name="fs" min="10" max="200" value="10" data-sizing="px">
  <br>
  <label for="fontcolor">Font Color:</label>
  <br>
  <input id="fontcolor" type="range" name="fc" min="0" max="25" value="0" data-sizing="px">
  <br>
  <label for="base">Base Color:</label>
  <br>
  <input id="base" type="color" name="base" value="#95c6c6">
</div>

<div class="firstclass">
  <h1 class="fh">Title</h1>
  <p class="fp">This is some Para</p>
</div>

<div class="secondclass">
  <h1 class="sh">Title</h1>
  <p class="sp">This is some Para</p>
</div>

<script
     src="https://code.jquery.com/jquery-3.2.1.min.js"
     integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
     crossorigin="anonymous"></script>