程序员经验分享-hwhale

根据属性中的值设置元素的样式

2024-01-12

我实际上首先问过这个问题，但这是我的错，因为我无法正确描述那里的事情，所以我无法得到答案。但现在我将描述这里的一切。实际上，我想要一个 javascript 函数，它可以找到具有完整文档中任何元素的特定前缀的类。让我们以 html 标记为例：

 <body class="c:bg-#008eff">
 <h1 class="c:bg-#ff5c5c">Hello, <span class="c:bg-white">World !</span></h1>

在上面的例子中，我们得到了一个公共前缀c:bg-在所有课程中。在前缀之后，我们找到 css 颜色的名称和十六进制。考虑一下，一个函数理解（）这样可以 ：

(1)查找所有带有前缀的类c:在 html 文档中。

(2) 查找后面的内容c:前缀，例如c:bg-将表明它是css背景属性，而c:text-会表明它是css颜色属性等。

(3) 查找要设置的值，例如c:bg-#008eff表示它是 css 背景属性，值为 #008eff 等。

(4) 删除c:bg-, c:text-等前缀从类中以字符串形式获取，并使用剩余部分来定义样式。

我们有我们的例子：

 <body class="c:bg-#008eff">
 <h1 class="c:bg-#ff5c5c">Hello, <span class="c:bg-white">World !</span></h1>

在浏览器窗口中上述代码的输出中，我们将找到背景为 #008eff 的 body、背景为 #ff5c5c 的 h1 和背景为白色的 span。

另一个例子 ：

 <body>
 <h1 class="c:text-#ff5c5c c:pad-20px">Hello, <span class="c:text-#008eff c:mar-20px">World !</span></h1>

在浏览器窗口中上述代码的输出中，我们将找到颜色为 #ff5c5c 和填充 20px 的 h1，以及颜色为 #008eff 和边距 20px 的跨度。

而且，是的，非常重要！如果重复相同类型的代码，则最后一个代码将覆盖第一个代码。

例子 ：

 <h1 class="c:bg-blue c:bg-red">Hello</h1> 
<!-- Executes red background -->

但愿，我现在很清楚了！那么，我的梦能成真吗？这是否有可能使理解（）功能 ？

感谢您给我时间


这是我如何解决更好的解决方案，使用data-*属性：

const applyStyle = el => el.style.cssText = el.dataset.style;

document.querySelectorAll("[data-style]").forEach(applyStyle);
<h1 data-style="color:#f0b; background:#0bf;">TEST</h1>
<h1 data-style="color:#b0f; background:#fb0;">TEST</h1>

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText

否则你可以这样做：

const props = {
  bg: 'background',
  text: 'color',
  pad: 'padding'
};

const understand = el => {
  const c_classes = [...el.classList].filter(name => name.startsWith('c:'));
  return el.style.cssText = c_classes.map(k => {
    const pv = k.split('c:')[1].split('-');
    return `${props[pv[0]]}:${pv[1]}`;
  }).join(';');
}

const ELZ = document.querySelectorAll("[class^='c:'], [class*=' c:']");
ELZ.forEach(understand);
<h1 class="test c:bg-yellow c:pad-20px c:text-#0bf bla">
    Hello, <span class="c:bg-red">World !</span>
</h1>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

css

class

根据属性中的值设置元素的样式 的相关文章

  • 在静态类中存储连接 (ASP.NET)

    由于我使用的是 Postgresql 并且无法使用 LINQ to SQL 因此我编写了自己的包装器类 这是学生课程的一部分 public class Student User private static NpgsqlConnection

  • 引发一系列事件 Backbone event:name

    extend object Backbone Events object on myalert one function msg document body innerHTML eve1 msg msg name this name con

  • 在 Nodejs/javascript 中的 Excel 中创建动态数量的列或标题

    我用过exceljsNodejs中用于将json数据导出到excel的模块 它工作正常 但必须在添加行之前预定义标题 列的名称 即列是固定的 添加行后 我无法动态添加列 我尝试了许多通过 npm 提供的模块 但它们都具有相同的功能 那么 有

  • 如何共享 Swagger 文档

    我最近开始使用 Swagger 来编写文档 但有一些事情我仍然不清楚 我创建了 YAML 文档 现在我希望能够与团队的其他成员共享 pdf 或 HTML Javascript 页面中的文档 我无法使用 SwaggerHub 因为它们没有私有

  • 为什么这个 JavaScript 可以在 Safari 上运行，但不能在 Firefox 上运行？

    我有 HTML 文件 我在 Safari 上尝试了该代码 运行良好 但是当我在 Firefox 上尝试这个时 它不起作用 任何人都可以建议如何使其在 Firefox 上工作吗 单击撤消按钮时 我想从 jsp 文件中检索内容 当我在 mac

  • 从一个页面导航到另一个页面时，JavaScript 不会执行

    我正在构建我的第一个 Ruby on Rails 应用程序 并尝试创建一个动画导航栏 我正在使用 jQuery 和 Turbolink 这是我的application js under app assets javascripts docu

  • flexslider 中的 GIF 滑块，如何仅在滑块上时开始 gif

    现在我有一个带有四个幻灯片的 Flexslider 第三个滑块是 gif 而不是像其他滑块一样是 jpg 我遇到的问题是 第三个 gif 滑块显然在到达页面时立即启动 而不是在您实际到达该滑块时启动 当点击前两个滑块时 gif 就快完成了

  • 代理递归函数

    想象一个简单的递归函数 我们试图包装它以检测输入和输出 A simple recursive function const count n gt n 1 count n 1 Wrap a function in a proxy to ins

  • Google App Script postMessage 与收件人窗口的来源不匹配

    我有一个 Google App 脚本部署为Web应用程序 https developers google com apps script guides web 它工作正常 直到今天晚上我发现它无法在 Firefox 或 Chrome 中加载

  • 为什么 html 中的 AngularJS 错误没有显示在控制台中？

    Here s a fiddle http jsfiddle net 6y7odxmj 3 用于说明 当 ng click 指令 例如 调用未在控制器的 scope 或其父级 上定义的函数时 它会默默地失败 当我尝试调试网页时 这种行为令人抓

  • CSS3 属性 webkit-overflow-scrolling:touch 错误

    iOS 5 发布了网页设计师的新属性 webkit overflow scrolling touch它使用 iOS 设备硬件加速器为可滚动 div 提供本机滚动 当在我们的开发网站上实施时 它确实有效 但效果不佳 我相信可能存在 CSS 问

  • Javascript 函数，我如何开始理解它们？

    我完全理解 为了学习 javascript 我需要知道函数是如何工作的 我了解传递参数的基础知识 然后使用值调用函数以将某些内容添加到一起 等等 我读过无数关于函数的文章 例如以及书籍等 但我只是不明白它们是如何使用的以及何时应该使用它们等

  • JavaScript 检查时区名称是否有效

    有没有一种方法可以在不使用外部库的情况下检查 JavaScript 中的时区名称是否有效 当用户在文本字段中输入时区名称时 我想验证时区是否有效 我知道我们可以使用时刻时区库轻松做到这一点 但我不想使用任何额外的库 我正在寻找纯 JavaS

  • IE9 中的 HTML5 视频两侧显示黑色边框

    我在我的网站中使用 HTML5 视频标签 该视频在所有浏览器中都能完美播放 但在 IE9 中它显示黑色边框 黑色扩展名 就像通常情况下 当播放器的大小大于视频的大小时 视频播放器会在其两侧显示一些黑色扩展 这是我们使用的解决方案 对于视频

  • 特别更改画布上的笔画不透明度，但不更改颜色

    我有一个漂亮整洁的脚本 可以循环显示颜色 并且与 xxxxxx格式 但我想改变透明度 有没有办法做到这一点 我指的是ctx strokeStyle 这是当前的代码 canvas strokeStyle 16777215 s length i

  • Meteor JS：存储特定模板实例状态的最佳方法是什么？

    我正在学习 Meteor JS 中的会话和反应式数据源 它们非常适合设置全局 UI 状态 但是 我不知道如何将它们的范围限制到模板的特定实例 这就是我想做的 我的页面上有多个可内容编辑的元素 每个下面都有一个 编辑 按钮 当用户单击 编辑

  • 将base64图像转换为Node Js中的文件

    我是 Node Js 新手 我需要包含用户的个人资料图片 我从 IOS 应用程序收到 Base64 图像的请求 我需要将其存储在 images 文件夹中并将图像路径保存在 mongodb 数据库中 我使用了以下代码 var bitmap n

  • 如何使用jquery点击眼睛图标时显示和隐藏密码

    我需要在单击眼睛图标时显示和隐藏用户密码 因此我为此编写了脚本 当我单击眼睛图标时 只有类正在更改 但密码不可见 再次单击斜线眼睛图标 它应该隐藏这两个图标方法不起作用如何解决这个问题

  • CSS 或 Javascript - 如果背景图像未加载，则显示后备文本[重复]

    这个问题在这里已经有答案了 如果徽标图形文件未加载或丢失 如何显示文本而不是徽标 我有带有背景 PNG 图像的 div div class iHaveBgImage this text should be displayed if bg i

  • CSS精灵什么时候适合使用，什么时候不适合使用？

    CSS精灵在什么情况下适合使用 什么时候不适合使用 是节省时间还是仅节省服务器请求 我认为带宽使用将是相同的 因为图像与大图像相同 但它是在一个部分中 何时何地使用 css sprite 是节省时间 工作中 的选择 对于导航来说 它有利于翻

随机推荐

  • 如何在 scala 中进行依赖注入？

    除了java之外 我还处于学习scala的开始阶段 我不明白如何在那里进行DI 我可以或者应该使用现有的 DI 库 应该手动完成还是有其他方法 标准 Java DI 框架通常可与 Scala 配合使用 但您也可以使用语言构造来达到同样的效果

  • data.table高效回收

    我经常在 data table 中使用回收 例如当我需要对未来几年进行预测时 我会在未来的每一年重复我的原始数据 这可能会导致类似的情况 library data table dt lt data table cbind 1 500000

  • 如何使方法返回类型通用？

    考虑这个例子 OOP 书籍中的典型例子 我有一个Animal类 其中每个Animal可以有很多朋友 还有像这样的子类Dog Duck Mouse等添加特定行为 例如bark quack etc 这是Animal class public c

  • 如何在 strings.xml 中输入字符“<”？

    我想输入字符串 lt in strings xmleclipse中的文件 字符串有字符 lt 我无法将其添加到 xml 文件而不出错 我什至试图逃避 特点

  • 应用程序在设备上崩溃，但在模拟器 iOS 上运行

    App wasn t developed by me but now I have to add some features Code compiles add launches on simulator but immediately c

  • 允许的 HTML 4.01 id 值正则表达式

    你能帮我构建一个与有效的 W3C HTML 4 01 匹配的正则表达式吗id value 根据 W3C 规范 ID 和 NAME 令牌必须以字母 A Za z 开头 并且可以是 后跟任意数量的字母 数字 0 9 连字符 下划线 冒号 和句点

  • 很棒的 RDF 可视化工具 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我想找到一些很棒的工具或样式来可视化我的 RDF 数据 以便在观看者访问 RDF 数据时能给他们带来震撼 问题是我现在得到的可视化工具只能

  • 在 PHP 的 foreach 循环中对项目进行分组

    所以 我正在尝试做一种用户市场类型的东西 有一个数据库item names 基本描述了虚拟物品 然后还有一张表market 当用户列出他们的一件商品时 该商品就会在用户 用户市场上出售 我这里唯一的问题是我想按项目名称对其进行分组 在ite

  • Swift 2 无法删除可选绑定

    我是 Swift 新手 对可选 没有更多的想法 我尝试从 plist 中获取数据 创建模型并显示UITableView 表格数据显示完美 但显示为Optional 捆绑 我尝试过改变 到 但无法解开 您能指导我解决这个问题吗 这是我的代码和

  • 数组字段的elasticsearch范围过滤器

    我有一个包含整数数组的字段 例如 source prices 20001 30001 我想过滤结果 使价格至少包含以下值之间的列表之一 20002 30000 不会返回上述文档 因为没有值介于 20002 和 30000 之间 但 1000

  • 使用 Django 模型选择 COUNT 个？

    有谁知道是否有办法只选择与 Django 中的查询匹配的行数 我编写了一个搜索 将结果分为 40 组 但我还想显示结果总数 我可以像 len Model objects filter name icontains search 这样的东西

  • 骨干网将模型传递给路由器

    我正在使用 require js 和 Backbone 开发一个 android 应用程序 我必须通过 touchend 事件将从集合中获取的模型传递给路由器 我该怎么做 define jquery underscore backbone

  • Rails 3.1 Edge 是否破坏了 XmlMarkup::Builder？

    网上有很多例子 例如http techoctave com c7 posts 32 create an rss feed in rails http techoctave com c7 posts 32 create an rss feed

  • 在 Jinja2 中使用“if any():”？

    在 Jinja2 中 我正在寻找一种方法来检查变量列表中至少一个是否具有值 基本上在 python 中我会这样做 if any item genre item type item color 但是 在 Jinja 中以下内容无效 if an

  • 1 个输入分隔中的 3 个值（数字）。蟒蛇3

    我现在正在编写一个代码 其中一部分需要要求用户在一行中输入 3 个不同的数字 每个数字可以是任意位数 假设我要求用户输入 他输入 31 722 9191 数字之间需要有空格 您将如何分离这些数字并为每个数字分配一个变量 例如 31 是 A

  • 如何从给定的数据中找到距当前位置最近的地点。

    我有位置地址列表 从我当前的位置 我需要到达最近的地点并且必须在地图上显示它 我怎样才能到达距离我当前位置最近的地方 首先 我将获取当前位置的纬度和长度 然后我将如何到达最近的地方 Thanks 首先获取您当前的location纬度 Lon

  • gzip 编码与 JSON 兼容吗？

    我正在尝试缩小 AJAX 调用中发生的一些奇怪现象的范围 我的 PHP 脚本的开头是这样的 ob start ob gzhandler 与 HTML 配合得很好 但是使用 application json 数据执行此操作有任何问题吗 有人知

  • Linq2Sql Many：很多问题，你会怎么做？

    我知道很多 Linq2Sql 不支持很多 但我正在研究解决方法 我正在使用我的小 SO 克隆 我有一个包含问题的表和一个包含标签的表和一个链接表 QuestionTag 所以我在问题和标签之间有一个经典的多 多关系 为了在首页上显示问题列表

  • 使用 Elasticsearch 进行简单的 AND 查询

    我正在尝试对两个指定字段进行简单查询 而手册和谷歌被证明没有什么帮助 下面的例子应该很清楚我想要做什么 query and term name family name daniel name given name tyrone 作为一个额外

  • 根据属性中的值设置元素的样式

    我实际上首先问过这个问题 但这是我的错 因为我无法正确描述那里的事情 所以我无法得到答案 但现在我将描述这里的一切 实际上 我想要一个 javascript 函数 它可以找到具有完整文档中任何元素的特定前缀的类 让我们以 html 标记为例

热门标签