动态改变 CSS 内容属性

2023-12-10

我的一个朋友正在从一家公司租用一个网上商店。他能够从不同的模板中进行选择,并且能够覆盖预定义的 CSS 并添加 javascript 片段。他要求我帮助她进行一些更改,但有一些我无法处理的事情:“添加到购物车”按钮。在下面的 CSS 中,有一个包含预定义值的“content”属性。我想根据 HTML lang 属性动态更改此属性的值。你知道我怎样才能实现这个目标吗? (我知道如何获取 lang 属性的值。我的问题是更改“content”属性的值)

#add_to_cart:before {
    display: block;
    font-family: 'sosa';
    font-size: 35px;
    content: "Ä";
    padding-right: 5px;
    font-weight: 400;
    width: 71px;
    height: 71px;
    line-height: 65px;
    text-align: center;
    text-indent: 0;
    text-shadow: none;
    color: #fff;
}

尝试这个:

HTML:

<html lang="en">
...
<div id="add_to_cart" data-content="">example</div>

CSS:

#add_to_cart:before {
    display: block;
    font-size: 35px;
    content: attr(data-content);
    padding-right: 5px;
    font-weight: 400;
    width: 71px;
    height: 71px;
    line-height: 65px;
    text-align: center;
    text-indent: 0;
    text-shadow: none;
    color: red;
}

JS:

$('#add_to_cart').attr('data-content', (document.documentElement.lang == 'en' ? "x" : "y"));

您会看到“example”之前的字符在以下情况下发生变化lang的属性<html>被改变了。

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

动态改变 CSS 内容属性 的相关文章

  • Hydrate with RTK Query 确实会抛出错误

    我有一个非常简单的组件来显示来自本地 API 的数据 使用 Nextjs API 路由制作 我使用 RTK 查询来获取数据 const api createApi reducerPath data baseQuery fetchBaseQu
  • iPad 2 的 HTML5 源元素错误是否已修复?

    根据这个页面 http camendesign com code video for everybody webm http camendesign com code video for everybody webm 第一个 iPad 有一
  • 更改文本框中一个字符的颜色 HTML/CSS [重复]

    这个问题在这里已经有答案了 我正在设计一个网站 我想问一下大家 如何通过CSS改变HTML文本框中字符串中的一个字符的颜色 示例 STACK OVER FLOW 只是 A 字母是红色的 你不能用常规方法做到这一点
  • 如何中和 CSS 定义而不覆盖

    有没有一种方法可以中和元素的 CSS 规则而不覆盖所有内容 例如 我正在使用 Twitter Bootstrap 它有许多预定义的 CSS 定义table 在某些地方 我不想要它们 对某些table元素 我想知道我是否可以做这样的事情 ta
  • apollo 客户端从存储中删除而不发生突变

    我需要通过 id 从本地存储中删除一条 记录 而不使用突变 因为服务器不支持突变 我尝试像这样手动访问商店 delete this apolloClient store getState apollo data 1112 这会删除记录 但是
  • 本地 401 工作,临时服务器得到 302

    我可能不会获得帮助第一次尝试所需的所有信息 但我会尽我所能 并在我们进行过程中对其进行编辑 我有一个使用 Spring Security Core 插件的 Grails 1 3 7 应用程序 我正在编写处理会话超时和 ajax 请求的代码
  • 使用jquery和coldfusion cffile上传多个文件

    不是一个真正的问题 只是想将其发布在某个地方 因为我在其他地方找不到它 现在我已经拼凑了一个工作演示 我想我会分享 这在 Coldfusion 和 Railo CFML 服务器上同样有 效 问题是 对于 CFML 开发人员来说 CFFILE
  • 两个日期之间间隔 15 分钟 javascript

    问题 我需要将两个日期 时间戳之间的所有 15 分钟时隙 日期格式 2016 08 10 16 00 00 创建为 HH mm 格式的数组 其中分钟限制为 00 15 30 45 示例 中午 12 30 到下午 2 30 将 gt 12 3
  • 如何反转媒体查询中元素的顺序?

    我有两个 div 左和右 但是当屏幕小于 500px 时 左 div 成为底部 div 右 div 成为顶部 div DOM 中的第一个 div 应该显示为第二个 第二个 div 为第一个 I use display flex 然后 div
  • 替换打字稿中字符串中字符的所有实例?

    我正在尝试用 x 字符替换电子邮件中的所有句号 例如 电子邮件受保护 cdn cgi l email protection 将变为 myxemail emailxcom 电子邮件设置为字符串 我的问题是它不只是替换句号 而是替换每个字符 所
  • backbone.js:视图中影响集合中不同模型的按钮

    我刚刚开始使用backbone js 到目前为止 我真的很喜欢它 我有这样的事情 ModelA ModelB ViewA ViewB ModelA 持有 ModelB 的集合 如何使用按钮构建模型 B 的视图 单击该按钮会更改集合中下一个
  • Skrollr 添加空白

    我已经尝试了一切 我在谷歌上阅读了 4 5 页试图找到适合我的修复程序 已经筋疲力尽了 即使我使用 skrollr 示例 我的问题仍然存在 不是说他们做错了什么 我知道我只是没有正确理解它 因此 我上传了一个演示 仅在移动设备上展示这个尴尬
  • 如何在 WebView 中添加 JavaScript 函数并稍后在提交 reCAPTCHA 时从 HTML 调用它

    我在 WebView 中添加一个 JavaScript 函数 如下所示 Kotlin val webView findViewById R id webview as WebView webView getSettings setJavaS
  • 在 React JSX 中返回配对元素

    问题 在 React 中 您希望通过映射数组来创建 DOM 结构 但数组中的每个项目应返回 2 个元素 例如 import React from react import from lodash let Component React ex
  • 如何在 jQueryUI 工具提示中换行

    新版本的 jQueryUI 1 9 附带了本机工具提示小部件 经过测试 如果内容 标题属性的值 很短 它就可以正常工作 但如果内容很长 工具提示一旦显示就会与输入文本重叠 有a demo http jqueryui com tooltip
  • 如何将命名空间与 TypeScript 外部模块一起使用?

    我有一些代码 基本类型 ts export namespace Living Things export class Animal move export class Plant photosynthesize dog ts import
  • 在 Javascript 中创建数组

    我对 javascript 不太熟悉 并且在用 javascript 制作 2d 或者也许我可能需要 3d 数组时遇到了一些麻烦 我目前需要收集 2 条信息 一个 ID 和一个值 因此我创建了以下内容 var myArray var id
  • 如何设置javascript对象数组中所有对象的特定属性值(lodash)

    我有以下对象数组 var arr id a1 guid sdfsfd value abc status active id a2 guid sdfsfd value def status inactive id a2 guid sdfsfd
  • 如何禁用 TinyMCE 文本区域

    我已经尝试了以下所有方法 tbxNote attr disabled disabled doesn t work tbxNote attr disabled true doesn t work either tinyMCE init mod
  • 快速响应的交互式图表/图形:SVG、Canvas 还是其他?

    我正在尝试选择正确的技术来更新一个项目 该项目基本上在可缩放 可平移的图表中渲染数千个点 当前使用 Protovis 的实现性能不佳 在这里查看 http www planethunters org classify http www pl

随机推荐

  • python 按值列出而不是按引用列出[重复]

    这个问题在这里已经有答案了 让我们举个例子 a help copyright credits license b a b append XYZ b help copyright credits license XYZ a help copy
  • 我的 WordPress 网站上的 footer.php 文件出现问题

    我使用了调试 收到以下错误 PHP Fatal error Uncaught TypeError ceil Argument 1 num must be of type int float string Give in var www ht
  • 是否可以让任何数据流块类型发送多个中间结果作为单个输入的结果?

    是否可以得到TransformManyBlocks 在创建中间结果时将其发送到下一步 而不是等待整个结果IEnumerable
  • Scala 将多行字符串转换为 BigInt

    我正在尝试使用以下代码从字符串中解析 100 个 50 位数字 val input 37107287533902102798797998220837590246510135740250 463769376774900097126481248
  • 谷歌 reCaptcha IE8

    Internet Explorer 8 支持 Google reCaptcha v2 吗 如果没有 是否有任何合适的 Internet Explorer 8 兼容验证码 我发现 reCaptcha 代码尝试使用 getContext 方法的
  • 在应用程序之间发送套接字c#

    我想知道是否有一种方法 您有一个 net 应用程序名称 appA 它接收 tcp 套接字连接 然后根据某些规则将套接字连接发送到另一个 net 应用程序名为 appB 我知道这违反了很多安全和良好实践 但如果可能的话会很有趣 Proxy 一
  • 动态 LiveTile - 添加背景图像?

    在我的 Windows Phone 7 应用程序中使用动态磁贴 效果非常好 我现在正在尝试创建动态动态图块 但无法显示背景图像 当使用下面的代码时 我只得到一个黑色的瓷砖 显示我添加的文本 但不显示背景图像 图像 构建操作 设置为 内容 有
  • WPF 背景两种色调

    我正在尝试做一些如此简单的事情 但无法取得任何成果 我一直在网上搜寻 试图找到一个清晰的示例或少量信息 但我找到的每一篇文章都显示了完全相同的简单示例 我想要做的就是为列表框项目设置一个背景 该背景是两种色调 但它们之间没有渐变混合 到目前
  • Pandas 合并两个具有不同列的数据框

    我肯定在这里错过了一些简单的东西 尝试合并 pandas 中几乎具有相同列名的两个数据框 但右侧数据框有一些左侧没有的列 反之亦然 gt df may id quantity attr 1 attr 2 0 1 20 0 1 1 2 23
  • 如何重定向 cron 脚本的完整输出

    我每天 18 35 运行一个简单的 cronjob 05 18 job sh 2 gt 1 gt gt job log 所以 job sh 的输出应该写入 job log 中 在job sh中 有一些echo命令和一些python脚本被执行
  • 如何使用正则表达式验证 JTable 的第一列?

    我正在编写一个程序 我必须验证第一列是否是 IP 地址 到目前为止 我只弄清楚如何找到如何过滤行 但在将数据写入文件之前必须检查该列 有人可以帮助我吗 您可以使用InputVerifier验证表格单元格的输入 这样你就不必验证一切after
  • 重新协商速率限制

    有谁知道在哪里以及如何设置此限制 这是关于 SSL TLS 连接的 如果您使用 OpenSSL 并且希望在一定字节数后进行重新协商 您可以使用BIO set ssl renegotiate bytes 如果您希望它在经过一定时间间隔后发生
  • Kotlin 转换双精度?至双倍

    我使用 Mapbox 开发地图应用程序 我正在使用的方法使用 Point Double Double 需要获取类型不匹配 找到双倍 双倍 val lat locationComponent lastKnownLocation latitud
  • 如何动态创建选项卡

    这是 C 中的 我基本上需要从 textbox Text 制作 TabPages 例如 textBox1 Text test TabPage textBox1 Text new TabPage 这就是我想要做的 我知道这不会直接工作 但这应
  • 带复选框的自定义列表视图 - 滚动时检查状态互换

    我使用带有复选框的自定义列表视图 滚动列表视图时 选中状态会互换如何控制互换并将其设置为默认值 即我选择的选中项目 代码供你参考 public View getView int position View convertView ViewG
  • 将时区名称转换为时间 ID:s

    我发现 iOS 框架不理解正确的时区名称 例如 东部标准时间 如果您输入 NSLog EST NSTimeZone timeZoneWithName Eastern Standard Time 你得到 美国东部时间 空 相反 您必须使用时间
  • 即使 RS 未完全满,是否也可能发生 RESOURCE_STALLS.RS 事件?

    的描述RESOURCE STALLS RSIntel Broadwell 的硬件性能事件如下 此事件对由于缺少合格条目而导致的停顿周期进行计数 在保留站 RS 这可能是由于 RS 溢出造成的 或者 由于 RS 阵列写入端口分配而导致 RS
  • 如何为 ggboxplot() 添加紧凑的字母显示?

    我正在尝试在我创建的箱线图中添加紧凑的字母显示 是否有机会结合cldList 功能与ggboxplot 这是我的示例数据 library FSA library multcompView library rcompanion library
  • 如何在Windows(Phone)8.1的BackgroundTask中使用SQLite

    Setup 我跟着带有 SQLite 示例的通用应用程序 to add SQLite到我的项目 然后添加BackgroundTask我跟着快速入门 创建并注册后台任务示例 Problem SQLite 的目标是Windows Phone 8
  • 动态改变 CSS 内容属性

    我的一个朋友正在从一家公司租用一个网上商店 他能够从不同的模板中进行选择 并且能够覆盖预定义的 CSS 并添加 javascript 片段 他要求我帮助她进行一些更改 但有一些我无法处理的事情 添加到购物车 按钮 在下面的 CSS 中 有一