如何使用javascript和jquery动态更改css属性

如何使用js或jquery动态更改H1标记的css属性。我的意思是，如果我有一个H1标签和一个H1标签和一个sh标签，我如何分别改变字体大小和颜色。我做了一个，但不工作。我怎样才能做到

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

这是我的

---

更新：我如何通过动态感应小提琴中的h1或p标记来实现这一点？我想要一个范围滑块，当我单击h1时，我的h1的当前值（属性）分别出现在范围滑块中，我可以编辑它们

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

$（“css选择器”）.css（“属性”、“值”）

您可以使用任何css选择器（#用于ID、.用于类等）

编辑（考虑您的请求）：

看看这段代码它不完全工作，但它可能会给您一个如何使用jQuery的示例。你会发现css的变化和事件，所以自己试试看


const输入=$（“.contorl输入”）；
设活动=$（“.fh”）；
$（“#fontsize”）。在（“输入”，函数（）上{
active.css（“font-size”，$（“#fontsize”）.css（“font-size”）；
});
$（“#fontcolor”）。在（“输入”，函数（）上{
active.css（“color”，$（“#fontcolor”）.css（“color”）；
});
$（“.fp”）。单击（函数（）{
$（“#fontcolor”）.val（$（“.fp”）.css（“color”）；
$（“#fontsize”）.val（$（“.fp”）.css（“字体大小”）；
活动=$（“.fp”）；
});
$（“.sh”）。单击（函数（）{
$（“#fontcolor”）.val（$（“.sh”）.css（“color”）；
$（“#fontsize”）.val（$（“.sh”）.css（“字体大小”）；
活动=$（“.fh”）；
});
$（“.fh”）。单击（函数（）{
$（“#fontcolor”）.val（$（“.fh”）.css（“color”）；
$（“#fontsize”）.val（$（“.fh”）.css（“字体大小”）；
活动=$（“.fh”）；
});
$（“.sp”）。单击（函数（）{
$（“#fontcolor”）.val（$（“.sp”）.css（“color”））；
$（“#fontsize”）.val（$（“.sp”）.css（“字体大小”）；
活动=$（“.sp”）；
});
.firstclass{背景色：黑色；}
.secondclass{背景色：黑色；}
h1{文本对齐：居中；}
p{文本对齐：居中；}
.fh{
颜色：白色；
字体大小：35px；
}
.fp{
颜色：白色；
字体大小：15px；
}
sh先生{
颜色：红色；
字体大小：35px；
}
.sp{
颜色：红色；
字体大小：15px；
}

字体大小：




字体颜色：




底色：


标题
这是一段
标题
这是一段
$（“h1”）.mousemove（function（）{$（this）.css（“color”，“red”）；}）；你能告诉我如何通过动态感应小提琴中的h1或p来实现这一点吗？我想要一个范围滑块，当我点击h1时，h1的当前值（属性）分别出现在范围滑块中。