如何更改 元素上的背景图像

2023-12-27

---

问题是，我可以放置固定的背景图像，但我希望在更改货币时更改它

code:

<select id="from" class="recalculate flag-show" style='background-image: url(<?= url("assets/img/volopa/flags/gbp.png") ?>); background-repeat: no-repeat!important; background-position:left!important;'>
                    <option value="gbp" selected="">GBP - Pound Sterling</option>
                    <option value="eur">EUR - EURO</option>
                    <option value="usd">USD - US Dollar</option>
                    <option value="aud">AUD - Australian Dollar</option>
                    <option value="cad">CAD - Canadian Dollar</option>
                    <option value="chf">CHF - Swiss Franc</option>
                    <option value="dkk">DKK - Danish Krone</option>
                    <option value="hkd">HKD - Hong Kong Dollar</option>
                    <option value="jpy">JPY - Japanese Yen</option>
                    <option value="nok">NOK - Norwegian Krone</option>
                    <option value="nzd">NZD - New Zealand Dollar</option>
                    <option value="pln">PLN - Polish Zloty</option>
                    <option value="sek">SEK - Swedish Krona</option>
                    <option value="zar">ZAR - South African Rand</option>
                </select>

计算器位置 http://volopa.borne.io/consumer-solution/

我尝试使用CSS： 选择#form选项[value="usd"]{....}

但没有任何变化。

先感谢您

我不确定仅使用 css 是否可以实现这一点。 您可以添加一个简单的片段Javascript。在这种情况下我可能会使用data-attributes.

我设置了一个例子data-flag并以这种方式瞄准它css.

const from = document.querySelector('#from');

from.addEventListener('change', function() {
    this.dataset.flag = this.value;
});

#from[data-flag="gbp"]{
  background: red;
}

#from[data-flag="eur"]{
  background: blue;
}

<select id="from" class="recalculate flag-show" data-flag="gbp">
      <option value="gbp" selected="">GBP - Pound Sterling</option>
      <option value="eur">EUR - EURO</option>
  </select>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

---

javascript

html

css

如何更改 元素上的背景图像 的相关文章

• 为什么 setTimeout 在 Chrome 中触发两次，而在 IE 或 Firefox 中则不然？

  有人能告诉我为什么 javascript 函数 生成新号码 在 Chrome 中触发两次 但在 IE 或 Firefox 中则不会 使用 Chrome 20 0 1132 57 IE9 和 Firefox 13

• javascript 选择自定义光标 (svg)

  我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其

• JavaScript 继承；调用和原型

  要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu

• 如何通过单击链接来更改 div 的内容？

  这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st

• 计算三次贝塞尔曲线的弧长、曲线长度。为什么不工作？

  我正在用这个算法计算弧长 三次贝塞尔曲线的长度 function getArcLength path var STEPS 1000 gt precision var t 1 STEPS var aX 0 var aY 0 var bX 0

• onclick 事件中未调用函数

  我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com

• 如何停止TinyMCE删除span标签？

  在我的工作中 前一位程序员决定使用公司网站上精彩的TinyMCE 我遇到的数千个问题之一是 如果原文有的话span标签 当我按下退格键删除一行 p仅标签 全部span标签已从文本中删除 这个错误比另一个错误更具体 我可以删除anything

• JavaScript eval("{}") 返回行为？

  根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a

• Vaadin 12 将对象传递给 JavaScript 函数：无法对类进行编码

  Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red

• Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

  Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J

• 从 PHP 数组生成 HTML 表

  我不明白这一点 我需要解决看似简单的问题 但这超出了我的逻辑 我需要编写一个函数 table columns input cols 它将输出一个表 示例 input array apple orange monkey potato chee

• Highcharts jQuery 渲染问题 - 所有浏览器

  我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I

• 使用 Enzyme 测试 `React.createRef` api

  我想测试下面的类 它使用React createRef api 不过 快速搜索并没有发现任何这样做的例子 有人成功过吗 我该如何嘲笑裁判 理想情况下我想使用shallow class Main extends React Component

• 有没有办法使用 ko.observableArray 作为地图？

  有没有办法使用ko observableArray http knockoutjs com documentation observableArrays html像地图 字典一样 例如 var arr ko observableArray

• css3按钮背景颜色无限过渡

  有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

• react-native - 图像需要来自 JSON 的本地路径

  你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np

• 在 iOS 7 Safari 中，如何区分通过边缘滑动与后退/前进按钮的 popstate 事件？

  在 iOS 7 Safari 中 现在有两种后退 前进导航方式 使用底部的传统后退 前进按钮箭头或从屏幕边缘滑动 我正在使用动画在 ajax 应用程序中的页面之间进行转换 但如果用户通过边缘滑动进行导航 我不想触发该转换 因为这本身就是一个

• 如何从 json 文件创建模型？ （ExtJS）

  这是我想使用 json 文件创建的模型 Ext define Users extend Ext data Model fields name user id type int name user name type string 为了根据服

• 将数组从 jquery ajax 传递到代码后面

  我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u

• 测量窗口偏移

  有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容

随机推荐

• 如何让Sprite遵循贝塞尔曲线

  我对 Objective C 和 Sprite Kit 还很陌生 但我已经做了一段时间的游戏开发 我目前正在开发一款 2D 游戏 敌舰在屏幕上从右向左移动 我一直在关注游戏不同部分的教程 然后在必要时进行添加 我找到了一个教程 其中游戏中的

• XQuery 不同值与 where 子句问题

  我对 XQuery 很陌生 所以如果我遗漏了什么 请原谅 我正在尝试提取元素的某些子节点不同的数据 以及某个同级节点等于某个预定义字符串的数据 for product in fn distinct values document cpwdo

• C++ 中的指针使用 NULL 或 0（零）吗？

  在 C 的早期 当它固定在 C 之上时 您不能使用 NULL 因为它被定义为 void 0 您不能将 NULL 分配给除void 这使得它有点无用 在那些日子里 人们普遍认为你使用0 零 表示空指针 直到今天 我仍然继续使用零作为空指针 但

• 基于服务器 url 路径的条件标头源

  Problem 我想为每种内容类型加载自定义头文件 categoryId 在我的 CMS 上 例如 如果网址是 action archive categoryId 1 我希望它包含我的 header medicine html 文件 我绝对

• SQL：用查询分割逗号分隔的字符串列表？

  这是我的表结构 id PaymentCond 1 ZBE1 AP1 LST2 CC1 2 VB3 CC1 ZBE1 我需要拆分列PaymentCond 并且很乐意通过简单的 sql 查询来做到这一点 因为我不知道如何使用函数并且希望保持一切

• 使用 Mono 将 C# .NET 应用程序移植到 OS X？

  好吧 伙计们 我正在编写一个我想要跨平台的应用程序 直到最近 我一直在尝试使用 C 在 Silverlight 中执行此操作 因为它也可以在 OS X 上运行 但由于我对 C 相当生疏 而且对 Silverlight 还很陌生 所以我遇到了

• 在文件中查找模式并重命名它们[关闭]

  Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我使用此命令查找具有给定模式的文件 然后将它们重命名为其他名称 find name GHBAG exec bash c echo

• asp.net 中的 url.content

  MVC 中的 url content 我可以使用什么与 ASP NET Web 表单相同的功能 如果您需要一种接受相对路径并为 ASP NET Web 表单生成 URL 的方法 请参阅Page ResolveUrl or Page Reso

• MAC OS X El Capitan 上的 Mono：LSOpenURLsWithRole

  我有一个 NET 软件 它在 Linux 和 MAC 上的 Mono 上运行 该软件打包为 appMacpack在 OSX Lion 下的 Mono 3 6 0 上 并使用 PackageMaker 创建了一个安装程序 它在所有新版本的 O

• 使用 apache poi 在文档 .docx 中创建文本框

  I want create a text box in a document docx but I didn t find a method that help me do it and any example Someone know h

• 如何制作具有两个手柄（针）的侧栏（轨迹栏）

  我的问题是我必须制作一个有两个手柄 针 的 SlideBar TrackBar 1 最小值 较低值 2 最大值 上限值 Like 开始 结束事实上 可能需要的范围是滑动条上的两个长约 2000 个刻度 到目前为止 我在互联网上进行了搜索 并

• 如何包含弹性布局？

  我正在尝试将弹性布局添加到角度应用程序中 但是当我这样做并尝试使用它时 应用程序会崩溃 我已经安装了 npm i angular flex layout angular cdk 然后导入到app module ts中 import Flex

• 在 MySQL 中将行从一个表复制到另一个表

  我有两个具有相同结构的表 我需要从一个表中选择数据并将它们存储到另一个表中 我怎样才能做到这一点 insert into tablea id name select id name from tableb

• 强制 spring RestTemplate 将纯文本处理为 JSON？

  Web API 正在响应请求Content Type text plain charset utf 8 但消息的格式就像 JSON 一样 例如 total 168 page 0 pageCount 1 在 Spring 中 此消息使用 Re

• 有没有办法通过批处理脚本在文件中存储和检索密码？

  ECHO OFF DFC EXE get isfrozen IF Errorlevel 1 GOTO Frozen IF Errorlevel 0 GOTO Thawed Frozen Echo Errorlevel 1 Computer

• 在运行时获取 JAVA_OPTS

  我的应用程序部署在 Tomcat 上 并且我已经配置了JAVA OPTS环境变量在 etc default tomcat7 似乎有一百万个不同的地方可以将这些变量提供给 Tomcat 所以我想检查我提供的值是否是实际使用的值 我可以在运行时

• Emacs 临时模式下的密码编辑

  我正在使用 emacs流浪模式 http www emacswiki org emacs TrampMode通过 ssh 远程编辑文件 问题是每次保存正在编辑的文件时都必须输入用户密码 我觉得这很烦人 我怎样才能只写一次密码 编辑会话 啊

• 无序列表和可访问性

  许多 大多数 旨在实现可访问性和标准合规性的网站都使用无序列表进行导航 这是否使网站更易于访问 或者只是提供有用的样式元素 我不介意它们 我一直以这种方式使用无序列表 只是 当我从页面中删除样式以尝试衡量其可访问性时 我突然意识到它也可能是

• 帧缓冲区对象拾取

  我正在尝试使用帧缓冲区进行对象拾取 并尝试使用 stbi write png 来查看我正在渲染的内容 因为该帧缓冲区不会渲染到屏幕上 我想使用无符号整数来确定对象 ID 这是帧缓冲区定义 我检查帧缓冲区是否有效 glGenFramebuff

• 如何更改

元素上的背景图像