如何使用javascript和jquery动态更改css属性[重复]

Question

如何使用 js 或 jquery 动态更改 H1 标签的 css 属性。我的意思是，如果假设我有一个带有 fh 类的 H1 标签和另一个带有 sh 类的 H1 标签，我该如何单独更改字体大小和颜色。我做了一个但不工作。我怎样才能做到这一点？

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));

这是我的fiddle

更新：我怎样才能通过动态感测我的小提琴中的 h1 或 p 标签来做到这一点有一个范围滑块我想要当我点击 h1 时我的 h1 的当前值（属性）分别进入范围滑块和我可以编辑它们

Answer 1

你可以在 jQuery 中这样改变 css：

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

您可以使用任何 css 选择器（# 表示 id，. 表示类等）。

编辑（考虑您的要求）：

看看这段代码。 它并不完全有效，但它可以为您提供如何使用 jQuery 的示例。您会在其中发现 css 更改和事件，因此请自行尝试。

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>