程序员经验分享-hwhale

改变 html 滑块按钮滚动时的颜色

2024-03-25

在这里我有 我的简单滑块理论上将用于根据滑块位置控制步进电机的运动。我想让它将托管的网站看起来专业，所以我花了很长时间试图找出如何在滚动时更改按钮颜色（这是因为电机控制我的锅炉温度，所以视觉表示temp 会很好）但我的问题是改变 css 值。我知道使用document.getElementById("myRange")得到.slidercss 但我需要定位.slider::-webkit-slider-thumb部分作为其background是按钮本身的颜色。事实证明，我很难找到一种方法来引用它，因为我不太了解双冒号位的作用。我研究发现:hover其他单冒号类引用是在满足特定条件时进行的，例如鼠标悬停在上方，而双冒号意味着该引用在技术上不存在，但可以抓取用于样式设计？并且它被称为伪元素（我认为）。

我还遇到过很多这样的例子：document.getElementById("testDiv").pseudoStyle("before","color","purple");

和这个：

document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0); document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';

我尝试将其适应我自己的使用，并做了其他事情，例如：

    var sliderButton = document.getElementById("myRange");
    sliderButton.pseudoStyle("::-webkit-slider-thumb","background",rgb(r, 0, b)); 
    //where r and b are predefined values between 0 and 255

And: document.styleSheets[0].addRule('.slider::-webkit-slider-thumb','background: green');

这些都不适合我，这可能是我做错的事情，但我一生都无法弄清楚。我所需要的只是一种改变的方法.slider::-webkit-slider-thumb background我的代码中的值。 感谢任何有想法的人

.slider {
      -webkit-appearance: none;
      width: 100%;
      height: 15px;
      border-radius: 5px;
      background: #c6c6c6;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .3s;
      transition: opacity .3s;
    }
    .slider:hover {
      opacity: 1;
      background: grey;
    }
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: red;
      cursor: pointer;
    }
    .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">

要采用 @guest271314 提供的解决方案，如果您为input or change事件并生成随机颜色，就可以获得动态颜色。您甚至可以将所需的颜色存储在数组中，并随机提取其中的一种来限制调色板。

var s = document.getElementById("myRange");

s.addEventListener("input", function(){

  // Generate random color
  
  // Hex:
  //var color = '#'+Math.floor(Math.random()*16777215).toString(16);
  
  // RGB:
  var num = Math.round("0xffffff" * Math.random());
  var r = num >> 16;
  var g = num >> 8 & 255;
  var b = num & 255;
  var color = 'rgb(' + r + ', ' + g + ', ' + b + ')';  
  
  // Loop over the CSS rules in the document's stylesheets
  for (let {cssRules} of document.styleSheets) {
  
    // Loop over the selector and styles of each rule
    for (let {selectorText, style} of cssRules) {
      // Check the selector for a match
      if (selectorText === ".slider::-webkit-slider-thumb") {
        // Update the style:
        style.backgroundColor = color;
      }
    }
  }
});
.slider {
      -webkit-appearance: none;
      width: 100%;
      height: 15px;
      border-radius: 5px;
      background: #c6c6c6;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .3s;
      transition: opacity .3s;
    }
    .slider:hover {
      opacity: 1;
      background: grey;
    }
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: red;
      cursor: pointer;
    }
    .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

css

改变 html 滑块按钮滚动时的颜色 的相关文章

随机推荐

  • 算术溢出相当于模运算吗？

    我需要在 C 中进行模 256 算术 那么我可以简单地做吗 unsigned char i i 代替 int i i i 1 256 不 没有什么可以保证unsigned char有八位 使用uint8 t from

  • 向 Apache Fop 添加注释

    我正在使用渲染 PDF阿帕奇 福普 我正在制作 XSLT 模板 用于将 xml 转换为 PDF 我想使用以下方法在输出 PDF 中添加注释阿帕奇 福普 我一直在搜索 它说 iText 支持向 pdf 添加注释 是否可以在 Apache Fo

  • wpf手动生成TreeViewItem容器

    我正在运行时创建一个 TreeView 它有几个节点 TreeViewItem 每个节点都有一个名称 最初它是崩溃的 单独的组合框显示所有 TreeViewItem 的名称 我必须根据所选名称突出显示 TreeViewItem 我正在使用递

  • 使用 scala 将 Spark 中的 DataFrame 单行转置为列

    我在这里看到这个问题 使用 scala 在 Spark 中转置数据帧而不进行聚合 https stackoverflow com questions 49392683 transpose dataframe without aggregat

  • 如何从 Javascript 调用 Objective-C？

    我有一个 WebView 我想从 JavaScript 调用 Objective C 中的视图 有人知道我该怎么做吗 我的 ViewController 中有这段代码 BOOL webView UIWebView webView2 shou

  • 在 Swift 中，如何停止所有进程，直到从 UICOLLECTIONVIEW 中的 parse.com 检索到数据

    在 CollectionView 中 我显示来自 parse com 的数据 成功找回 但无法在单元格中显示 我收到数组出站错误 我发现了错误 解析是异步运行的 但是 在解析结束之前 集合视图会被加载 所以我无法在单元格中显示值 它抛出一个

  • 使用Firebug发送表单数据

    是否可以使用 URL 中没有的参数发送 AJAX 数据 我有一个从表单获取信息的脚本 服务器使用 POST 而不是 GET 我注意到 FireBug 可以仅在 URL 中发送参数 如果不可能 是否有其他程序可以帮助我 https addon

  • 我怎样才能只显示card.column值与angular2中的column.id匹配的结果？

    我有下面的代码 它工作正常 它的作用是 ngFor Repeat 为列对象中的每一列创建一个列 目前 它显示每列中卡片对象中的每张卡片 我想要它做的是仅显示列中的卡片 其中column id card column 我该如何修改我的代码来做

  • 使用 ElementTree 解析 XML 时使用命名空间

    这是以下问题使用 ElementTree 修改 XML https stackoverflow com questions 25068629 modify a xml using elementtree 我现在在 XML 中有命名空间并尝试

  • 为什么 jq 打印记录冗余且不匹配以及如何修复？

    我有一个 json 文件 其中包含六个 发票 对象 每个对象有 140 多行值 我只想查看六个对象中每个对象的几个值 jq似乎是一个有前途的解决方案 我在用着jq version 1 5 1 a5b5cbe可以通过以下方式获得apt的常用存

  • 使用CSS模块如何定义多个样式名称

    我正在尝试使用 css 模块为一个元素使用多个类 我该怎么做呢 function Footer props const route props return div div p this site was created by me p d

  • 如何在 MATLAB 中可视化如图所示的体积数据？

    我的问题非常简单 我有一堆矩阵 所有矩阵都相互堆叠起来 这样我就有了大量的数据 我想可视化这些数据 如下图所示 在我看来 需要一定程度的透明度 这可能与每个体素的值有关 也就是说 值越高 体素对其后面的事物越不 透明 我不知道如何开始 这是

  • 如何在 SwiftUI 中使用 URLSession 请求后呈现视图？

    我想在收到请求的数据后呈现一个视图 如下所示 var body some View VStack Text Company ID TextField companyID textFieldStyle roundedBorder URLSes

  • 根据从下拉列表中选择的值显示文本框[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案

  • 如何使用多个相互调用的自定义过滤器？

    大家好 我正在使用 Spring Security 3 0 2 我有一个自定义过滤器 它的顺序是最后一个 我想在该过滤器之后添加另一个过滤器 以下配置正确吗

  • 如何在Electron中运行express？

    我已经能够通过以下存储库在电子应用程序中成功运行express https github com theallmightyjohnmanning electron express https github com theallmightyj

  • 如何访问远程会话的 InputObject 上的 NoteProperties

    我访问时遇到困难PSObject定义了 NoteProperties 这些属性通过以下方式传递到远程会话Invoke Command 我为此目的构建对象的原因是我需要访问远程会话中的两条单独的信息 但 PowerShell 仅提供了一条信息

  • Spring Cloud Zuul 在实例关闭时重试并转发到其他可用实例

    使用 Camden SR5 作为 spring cloud 依赖项 并使用 spring boot 1 5 2 RELEASE 在我当前的设置中 我有 尤里卡服务器 配置服务器 在随机端口上运行 zuul网关服务器 和 2 个服务实例 在随

  • 使用增量计数器在 Couchbase 集群中生成唯一密钥

    我听到的关于 Couchbase 和其他 NoSQL 数据库的最常见问题是如何为记录生成唯一键 或者更具体地说 如何复制常见关系数据库的自动增量功能 Couchbase 中经常提到的解决方案是增量函数 您可以在数字键上调用增量 它将按顺序生

  • 改变 html 滑块按钮滚动时的颜色

    在这里我有 我的简单滑块理论上将用于根据滑块位置控制步进电机的运动 我想让它将托管的网站看起来专业 所以我花了很长时间试图找出如何在滚动时更改按钮颜色 这是因为电机控制我的锅炉温度 所以视觉表示temp 会很好 但我的问题是改变 css 值

热门标签