javascript - 如何在 CSS 函数中读取样式值

Question

我正在通过插入这样的内容在 Javascript 中创建几个 div

'<div style="background-color:' + bgColor + '</div>'

现在我想根据背景的亮度自动将文本的颜色设置为黑色或白色。

我看到 2 个选项 - 全部由 Javascript 驱动或仅由 CSS 驱动。我更喜欢 CSS 选项，但是，不知道如何读取 CSS 函数的背景颜色，例如

@function set-color($color) {
  @if (lightness($color) > 40) {
    @return #000;
  }
  @else {
    @return #FFF;
  }
}

如何获取背景颜色来执行类似的操作

div { color: set-color(???); }

混合混合模式怎么样？

Answer 1

在关于如何根据背景颜色选择黑色和白色文本颜色的问题中提出了几个想法。

大多数问题都已在评论中以某种方式得到了回答。一一列举这些想法:

我们可以使用 CSS mix-blend-mode - 不可以。没有一种设置可以确保文本在所有可能的背景上都可读。

我们可以使用CSS(首选方法) - 不幸的是不能，因为要求文本颜色依赖于背景颜色的div是由JS在运行时创建的。

我们可以使用 JS - 是的，因为 div 是由 JS 创建的，并且设置了背景颜色，那么它也可能设置了颜色。

JS 字符串如问题中给出，并添加了颜色设置:

'

这是定义该函数的代码片段。该代码片段还允许您选择背景颜色，然后设置一个(大致)取决于背景“亮度”的颜色。请参阅此处引用的 SO 问题以进行进一步讨论，因为人类颜色感知是一个困难的话题。

//from https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
function textBlackOrWhite(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);//also checks we have a well-formed hex number
  
//from https://stackoverflow.com/questions/596216 the answer by @FranciPenov which gives an approximation: (R+R+G+G+G+B)/6 
  let itsbright = function () { return ((2*parseInt(result[1], 16) + 3*parseInt(result[2], 16) + parseInt(result[3], 16))/6)>127; }
  return result ? (itsbright()) ? '#000000' : '#ffffff' : '#000000';//falls back onto black if bgColor was not a well-formed 3 or 6 digit hex color
}

<div id="div" style="font-family: monospace; box-sizing: border-box; margin: 0; padding: 40px 0; width: 100px; height: 100px; border-style: solid; border-radius: 50%; background-color: black; color: white;text-align:center;">#ffffff</div>
Click to choose background color: <input id="input" placeholder='#00000' type='color' value='#000000'/>
<button onclick="let d = document.getElementById('div'); let i = document.getElementById('input'); d.innerHTML = i.value; d.style.backgroundColor = i.value; d.style.color = textBlackOrWhite(i.value);">Submit</button>

关于javascript - 如何在 CSS 函数中读取样式值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64723758/