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

This question already has answers here:

How to change CSS using jQuery?
                                
                                    （10个回答）
                                
                        
                                2年前关闭。
            
                    
如何使用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的当前值（属性）分别位于范围滑块中，并且我可以编辑他们

最佳答案

您可以像这样在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>

关于javascript - 如何使用javascript和jquery动态更改css属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44561859/