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选择器（＃表示ids，。表示类等）。

编辑（考虑您的要求）：

看看这段代码。 它并不完全正常，但它可能会为您提供如何使用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>

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

1 个答案: