如何使用 jQuery 中的滑块更改样式的值

Posted

技术标签:

【中文标题】如何使用 jQuery 中的滑块更改样式的值【英文标题】:How to change value of style using a slider in jQuery 【发布时间】:2021-09-13 03:57:51 【问题描述】:

我有一个在 jQuery 中改变其值的滑块。如何使用此滑块更改我的宽度中的样式值,以便 div 的宽度将对应于滑块的​​值。我已将我的 css 设置为将宽度更改为滑块的值,但它不起作用。

我有这样的代码:

<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<div id="changecss" style="width: 50%;">Change WIDTH</div>

和jQuery

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var changecss = document.getElementById("changecss");

var a;

output.innerhtml = slider.value;

slider.oninput = function() 
  output.innerHTML = this.value;
  
  a = this.value;

  $("#changecss").css("width", a);

CodePen

【问题讨论】:

这里 css("width", a); 更改为 css("width", a+"%");px 。工作code 这是有道理的。我正在从值中删除百分比或 px。谢谢,那行得通。 【参考方案1】:

请看下面的代码。

<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<div id="changecss" style="width: 50%;background-color:blue;">Change WIDTH</div>
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var changecss = document.getElementById("changecss");

var a;

output.innerHTML = slider.value;

slider.oninput = function() 
  output.innerHTML = this.value;
  
  a = this.value;

  $("#changecss").css("width", a+"%");

</script>

【讨论】:

以上是关于如何使用 jQuery 中的滑块更改样式的值的主要内容,如果未能解决你的问题,请参考以下文章

如何使滑块控件的滑块更宽? (使用 MFC)

更改 MPVolumeView 的滑块

如何在运行中向 jQuery 滑块添加多个句柄

Kivy - 另一个屏幕上的滑块类值更改

如何使 React 光滑的滑块与图标一起使用?

如何使用从 Swift 3 中的滑块中选择的 JSON 数据更新 tableviewcell?