主页 / 问题 / 640370
Accepted
cronfy
Asked:2020-03-16 22:51:57 +0000 UTC2020-03-16 22:51:57 +0000 UTC

Javascript：在黑色背景上的页面上查找黑色文本

  • 772

如何使用 Javascript 查找页面上所有黑底黑字的元素？同时，黑色背景/颜色可以不分配给元素本身，而是分配给远方的父元素，但在所有继承之后，结果是黑色的黑色。

我们设定的任务是：在网站上为视障人士制作一个版本。其中一个要点是颜色反转，即我们在黑色背景上显示白色文本。我写了 black backgroundy body，更正了其他容器的 css，一切都很好，除了一个但是。在所见即所得编辑器的某些页面的管理区域中，明确定义了文本的黑色（在属性中style）。因此，此文本在页面上不可见。

我想找到一种无需更改页面代码即可解决问题的解决方案。

例如，让 javascript 自动找到这样的文本并将其颜色更改为白色。问题是如何找到这样的元素。

到目前为止，我只看到递归遍历所有 DOM 元素、记住background父元素并检查元素本身的颜色的选项。

但也许有更简单的方法，一些在 jquery 中几行的解决方案？

换句话说，您需要确保在第二个示例div > p中文本是可见的：

.orig {
  background-color: #fff;
}

.invert {
  background-color: #000;
}
<h2>Оригинал</h2>
<div class="orig"><p style="color: black">Текст</p></div>

<h2>Инверсия</h2>
<div class="invert"><p style="color: black">Текст</p></div>

javascript

5 个回答

  1. Best Answer

    我突然想到，编辑器中设置的样式不一定会将文本设置为黑色——它可以是深灰色或某种棕色。这种颜色的文字在倒置的背景上，对于视障人士来说仍然难以阅读，所以你需要确定文字和背景的对比度。

    代码部分复制粘贴自Leah Veru的对比度计。

    这段代码中发生了什么：函数getLuminance()返回相对亮度；该函数getContrastRatio()返回输入的背景和文本颜色数据的对比度。我们遍历块内的每个段落.invert，确定对比度，如果小于 7（这是 WCAG 要求），我们将文本设为白色，如果大于 7，则保持原样.

    UPD：我重写了代码以确定背景颜色不是为父元素，而是为元素本身，为此你需要在 CSS 中编写一个段落background-color: inherit并将bg你自己的背景颜色的值分配给变量：bg = $(item).css('background-color')。

    UPD：最终版本，它允许您对对比度不足且不使用的元素执行任何操作background-color: inherit。

    资料来源：

    Lea Verou，对比度。

    相对亮度计算公式：https ://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef 。

    对比度计算公式：https ://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef 。

    $(function() {
  var color, bg, textLuminance, parentLuminance, cr;

  $('.invert p').each(function(index, item) {
    color = $(item).css('color'),
    bg = $(item).css('background-color');

    textLuminance = getLuminance(color);
    parentLuminance = getLuminance(bg);
    
    cr = getContrastRatio(textLuminance, parentLuminance);
    
    if(cr <= 7) $(item).css('color', '#fff');
  });

  function getContrastRatio(l1, l2) {
    l1 += .05,
    l2 += .05;
    
    var ratio = l1 / l2;

    if (l2 > l1) {
      ratio = 1 / ratio;
    }

    return ratio = Math.round(ratio, 1);
  }

  function getLuminance(color) {
    var rgb = color.slice(4, -1).split(',').map(Number);

    for (var i = 0; i < 3; i++) {
      var rgbI = rgb[i];

      rgbI /= 255;

      rgbI = rgbI < .03928 ? rgbI / 12.92 : Math.pow((rgbI + .055) / 1.055, 2.4);

      rgb[i] = rgbI;
    }

    return .2126 * rgb[0] + .7152 * rgb[1] + 0.0722 * rgb[2];
  }
});
    .orig {
  background-color: #fff;
}

.invert {
  background-color: #000;
}

.invert p {
  padding: 5px;
  background-color: inherit;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>Оригинал</h2>
<div class="orig">
  <p style="color: black">Текст</p>
</div>

<h2>Инверсия</h2>
<div class="invert">
  <p>Обычный текст без инлайновых стилей</p>
</div>

<div class="invert">
  <div style="background-color: #fff">
  <div style="background-color: #ff0">
  <div>
  <p style="color: black">Черный Текст</p>
  </div>
  </div>
  </div>
</div>

<div class="invert">
  <p style="color: brown; background: darkgrey">Коричневый Текст</p>
</div>

<div class="invert">
  <p style="color: blue">Синий Текст</p>
</div>

<div class="invert">
  <p style="color: yellow">Желтый Текст</p>
</div>

<div class="invert">
  <p style="color: orange">Оранжевый Текст</p>
</div>

    • 9

  2. 可能是这样：

    $('p').each(function(){
  var
    $this = $(this),
    wrap = $this.parent('div'),
    color = $(this).css('color'),
    bg = wrap.css('backgroundColor');
  
  console.log(color + ' ' + bg);
  
  if(color === bg) {
    $this.css({'color':'#ffffff'});
  }
});
    .orig {
  background-color: #fff;
}

.invert {
  background-color: #000;
}
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  
<h2>Оригинал</h2>
<div class="orig"><p style="color: black">Текст</p></div>

<h2>Инверсия</h2>
<div class="invert"><p style="color: black">Текст</p></div>

    要么像这样：

    $('p').each(function(){
  var
    $this = $(this),
    wrap = $this.closest('.invert'),
    color = $(this).css('color'),
    bg = wrap.css('backgroundColor');
  
  console.log(color + ' ' + bg);
  
  if(color === bg) {
    $this.css({'color':'#ffffff'});
  }
});
    .orig {
  background-color: #fff;
}

.invert {
  background-color: #000;
}
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  
<h2>Оригинал</h2>
<div class="orig"><p style="color: black">Текст</p></div>

<h2>Инверсия</h2>
<div class="invert">
  <div>
    <div>
      <div><p style="color: black">Текст</p></div>
    </div>
  </div>
</div>

    • 7

  3. 也许有过滤器invert？

    .orig {
  background-color: #fff;
}

.invert {
  background-color: #000;
}

.invert p {
  filter: invert(100%);
}
    <h2>Оригинал</h2>
<div class="orig"><p style="color: black">Текст</p></div>

<h2>Инверсия</h2>
<div class="invert"><p style="color: black">Текст</p></div>

    • 4

  4. 好奇的。
    当您更改文本节点 ( MutationObserver) 时，您可以检查其颜色，将其与黑色进行比较，如果太暗，则将其调亮。
    保存时绕树（TreeWalker），强制设置文字颜色。

    • 3

  5. 如果您想快速轻松地完成它，请使用属性在本机 CSS 中完成mix-blend-mode：

    p {
  color: #fff !important;;
  mix-blend-mode: difference;
}
    <h2>Оригинал</h2>
<div style="background-color: #fff;"><p>Текст</p></div>

<h2>Инверсия</h2>
<div style="background-color: #000;"><p style="color: black">Текст</p></div>

<h2>mix-blend-mode</h2>
<div style="background-color: #000;"><p>Текст</p></div>

    • 1

相关问题