getComputedStyle 规范中是否指定了颜色格式?

2024-02-28

我正在解析返回的颜色字符串getComputedStyle to get R, G, B, and A从中获取价值。

到目前为止(在 Chrome 和 Firefox 中),颜色值似乎总是返回rgb or rgba易于解析的格式:

const [, r, g, b, a] = str.replace(/\s/g, "").match(/rgba?\((\d+(?:\.\d+)?),(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)(?:,(\d+(?:\.\d+)?))?\)/i);

但是,我无法找到有关颜色格式的任何承诺any https://www.w3.org/TR/DOM-Level-2-Style/#CSS-CSSview-getComputedStyle of the specs https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle for getComputedStyle列于其MDN page https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle.

是否有任何颜色格式的保证getComputedStyle?还是完全取决于浏览器的实现?

我不想检查 HEX 和 HSLA 值(实际上还有其他可能的值 - 我不完全确定)。

用于在控制台中测试颜色值的快速代码片段:

console.log((str => {
    const div = document.createElement("div");
    div.style.backgroundColor = str;
    document.body.append(div);
    return getComputedStyle(div).backgroundColor;
})("magenta"));

CSSOM 没有直接说明这一点,而是参考 https://drafts.csswg.org/cssom/#serialize-a-css-component-valuecss-颜色-4:

To 序列化 CSS 组件值取决于组件,如下所示:


如果 是解析值的组成部分,请参阅CSS Color 4 §4.6 解析 值 https://www.w3.org/TR/css-color-4/#resolving-color-values.

如果 是计算值的组成部分,请参见CSS Color 4 §4.7 序列化 值 https://www.w3.org/TR/css-color-4/#serializing-color-values.

出于以下目的getComputedStyle(),上面两行的意思是一样的。具体来说,第4.7.2节 https://www.w3.org/TR/css-color-4/#serializing-sRGB-values涵盖了大多数常用格式:

4.7.2.序列化 sRGB 值

以下 sRGB 值的序列化形式:

  • 十六进制颜色
  • rgb() and rgba() values
  • hsl() and hsla() values
  • hwb() values
  • 命名颜色

是从计算值导出的,因此,使用rgb() or rgba()形式(取决于 alpha 是否恰好为 1),函数名称采用小写字母。

第 4.7.6 节 https://www.w3.org/TR/css-color-4/#serializing-other-colors覆盖系统颜色(计算为小写),transparent(计算为rgba(0, 0, 0, 0)) and currentColor(计算为小写currentcolor).

由于 css-color-4 引入了几种指定颜色的新方法,因此还存在其他格式的其他部分,例如§4.7.3 https://www.w3.org/TR/css-color-4/#resolving-lab-lch-values对于 LCH 值,§4.7.4 https://www.w3.org/TR/css-color-4/#serializing-color-function-values为了color()功能等等。

这意味着颜色值来自getComputedStyle()保证在任一rgb() or rgba()格式,取决于 alpha 值,only当指定值采用 §4.7.2 中的任何格式时。但是 §4.7.2 和 §4.7.6 涵盖了日常 CSS 中的绝大多数用例,因此它们仍然可以依赖。考虑到其他外来格式尚未在任何地方得到真正支持,因此在它们享受任何主流用途之前可能不值得对其进行测试。

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

getComputedStyle 规范中是否指定了颜色格式? 的相关文章

  • Chrome 扩展同步调用 - 仅在窗口关闭后创建窗口

    我有这个代码 function voteNewWindow mailNum chrome windows create url http www google com incognito true function window conso
  • 搜索深度嵌套数组以更新对象

    我有一个深层嵌套的数据结构 我有兴趣匹配数组 和数组数组 中的某个值 然后将一些数据推送到随附的数组中 例如以下是我的数组colors并伴随着的是更多颜色数组可能存在也可能不存在 var myData color green moreCol
  • 确定元素是在页面折叠上方还是下方

    我有一些页面有多个输入框 用户可以在其中输入文本 在单击 下一步 按钮之前 需要填写其中一些内容 我弹出验证错误供用户查看 但是如果问题不在页面上 我希望页面滚动到它 而不是他们必须搜索丢失 错误的字段 我有一个滚动到位 但我无法确定要滚动
  • 如何使用 Angular JS 单击时将 html 模板附加到 div/指令?

    我有这种情况
  • console.log() 显示同一对象属性的矛盾值

    我想我可能要疯了 我使用 console log 来查看对象的状态 然后在下一行对同一对象的特定属性执行 console log 并为每个属性获取不同的值 我正在使用的代码是 console log this pictures Items
  • html css 下拉菜单

    这是我第一次在 Stack Overflow 上发帖 我不熟悉论坛发帖规定 所以请让我知道我做错了什么 我在论坛中研究过这个问题 但我所遇到的一切都没有给我明确的答案 我试图从 新闻 元素创建一个下拉菜单 但在运行代码时我从未得到任何可见的
  • 在管道中重用变量的功能方式

    在 javascript 和 typescript 中与 Ramda 一起使用函数式编程 我经常发现自己编写如下代码 const myFun c gt const myId c id const value pipe getAnotherO
  • 当百分比填充定义元素高度时忽略 max-height

    The max height当内部填充大于最大高度值时 属性值似乎被忽略 例如 在元素上设置此类会导致最大高度被忽略 max height ignored height 0 or auto makes no difference max h
  • 如何使用 vanilla JS 实现可维护的反应式 UI

    今天我遇到了一个问题 可以通过使用像 Vue 这样的反应式和状态管理框架来轻松解决 遗憾的是 无法使用它 以下 简化 情况 链接到代码笔 https codepen io theiaz pen BazErKV 我们有一个服务器渲染的页面 其
  • 如何打开弹出窗口并用父窗口中的数据填充它?

    如何使用 JavaScript jQuery 使用父页面中 JS 变量的数据填充弹出窗口 在我的示例中 我有一个文件名数组 我在父窗口中最多列出五个 如果还有更多 我想提供一个链接来打开弹出窗口并列出数组中的每个帖子 因此 如果我打开一个包
  • 如何在 ASP.NET MVC 3 的 Razor 视图中编码嵌入的 javascript?

    如何在以下上下文中正确编码 JavaScript 我的 JSON 对象中的值是由应用程序管理员设置的 因此我假设它们需要正确编码 对于 HTML 和 JavaScript 都是如此 我在用着System Web Script Seriali
  • 禁用特定 div 上的 Tab 键

    我有以下结构 div div Some content div div Some content div div 我想 禁用 div2 上的 tab 键 我的意思是按下 tab 键时 div2 的元素不会获得焦点 有没有简单的方法可以使用
  • 如何处理requireJs超时错误?

    我正在使用 require js 作为加载框架编写一个移动混合应用程序 我遇到加载错误的问题 我想做的是在设备离线且无法下载在屏幕上显示地图所需的 google 地图 API 脚本时设置后备解决方案 我得到的只是 Uncaught Erro
  • HTML 元素的默认背景颜色是什么?白色还是透明?

    我只是被一个简单的问题困住了 想弄清楚 HTML 元素的默认背景颜色是什么 是白色的还是透明的 默认背景颜色是透明的 看这里 https developer mozilla org en docs Web CSS background co
  • Knockout.js 安全绑定

    我想使用带有淘汰赛的安全绑定 为此我使用敲除安全绑定 js https github com brianmhunt knockout secure binding 谁能解释一下为什么下面的代码不起作用 它会抛出一个错误 未捕获 淘汰 安全
  • JavaScript 数组扩展语法的时间复杂度是多少?

    我想知道在 JavaScript 中使用数组扩展的时间复杂度是多少 是线性 O n 还是常数 O 1 下面的语法示例 let lar Math max nums 传播称为 Symbol iterator 有关对象的属性 对于数组 这将迭代数
  • MongoDB中如何通过引用字段进行查询?

    我有两个 Mongo 模式 User id ObjectId name String country ObjectId Reference to schema Country Country id ObjectId name String
  • Flowtype 属性“msg”缺失为 null 或未定义

    我发现 Flow 很难用 我明白那个Array find可以返回或未定义 因此 通过阅读以下内容 github Array find on Array 引发 https github com facebook flow issues 351
  • 无法使用 HTML 设置未定义 jQuery UI 自动完成的属性“_renderItem”

    我使用以下代码将 jQuery UI 自动完成项呈现为 HTML 这些项目在自动完成控件中正确呈现 但我不断收到此 JavaScript 错误并且无法移动过去 Firefox 无法转换 JavaScript 参数 Chrome 无法设置未定
  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht

随机推荐