Question

我想写一个脚本来减少眼睛疲劳，它可以转换页面上所有文本的颜色以及每个元素的所有背景。（我猜背景会变得更暗，然后文字必须变得更亮）。是否有任何简单的JavaScript技术可以对页面上的所有元素进行全局更改？或者我是否必须以某种方式循环遍历每个元素并检查该元素的文本颜色和背景颜色（如果是这样我将如何处理）？我意识到可能存在不同复杂程度的不同选项，对各种方式进行概述会很有趣。

Answer 1

因为您需要单独检查每个元素的颜色，所以没有使用vanilla javascript进行全局操作的方法。

你仍然需要选择所有元素并通过循环单独检查它们的颜色。

在浏览元素时，您需要检索＆＃34;计算的＆＃34; 颜色，并根据您的要求更改它们：

下面的代码片段会改变元素的对比度，使背景更暗，文字更亮，可以根据需要通过全局变量contrastChange进行调整。

＆＃13;

  var pageElements = document.querySelectorAll("*");

  //define a how much to change the contrast from 0 to 1

  var contrastChange = -0.3;

  //loop through the elements
  for (var i = 0; i < pageElements.length; i++) {
    //get the element's computed styles
    var elementComputedStyle = window.getComputedStyle(pageElements[i], "");
    //adjust the color
    var elemAdjustedColor = AdjustColor(elementComputedStyle.color, -contrastChange / 2);
    //adjust background color
    var elemAdjustedBGColor = AdjustColor(elementComputedStyle.backgroundColor, contrastChange);

    //set the new colors
    pageElements[i].style.color = elemAdjustedColor;
    pageElements[i].style.backgroundColor = elemAdjustedBGColor;
  }


function AdjustColor(color, brightness) {
  console.log(color);
  //the computed colors are retrieved as rgb(,,) for color attribute and
  //rgba(,,,) for background color, so we break them into
  //red green and blue components and adjust them according to the brightness
  var digits = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/.exec(color);
  
  //****UPDATE****
  //sometimes the color might be reported not by its rgb components, 
  //but rather by name like "transparent". in that case return the color unchanged
  //**************
  if (digits != null) {
    //adjust the colors
    var red = parseInt(digits[1]) + 255 * brightness;
    var green = parseInt(digits[2]) + 255 * brightness;
    var blue = parseInt(digits[3]) + 255 * brightness;
    //if color was rgba and had alpha component, we blend the color 
    //with white (because we dont know what was the color behind this element
    //and we are too lazy to check
    if (digits[4] != undefined) {
      alpha = 1 - digits[4];
      red = Math.round((alpha * (red / 255) + (alpha)) * 255);
      green = Math.round((alpha * (green / 255) + (alpha)) * 255);
      blue = Math.round((alpha * (blue / 255) + (alpha)) * 255);
    }
    // keep them in the 0-255 range
    if (red > 255) red = 255;
    if (red < 0) red = 0;
    if (green > 255) green = 255;
    if (green < 0) green = 0;
    if (blue > 255) blue = 255;
    if (blue < 0) blue = 0;

    return "rgb(" + Math.round(red) + "," + Math.round(green) + "," + Math.round(blue) + ")";
  } else {
    return color;
  }
};

＆＃13;

<span style="background-color:rgba(255,0,0,0.1);">teasd asd asd ast</span>
<span style="background-color:#ffee99;">tesasdas dasd asd t</span>
<span style="background-color:#aaeecc;">teasd asd asd asd sst</span>

＆＃13;

Answer 2

我会建议：

var elem= document.querySelectorAll("*");

for (var i = 0; i < elem.length; i++) {
elem[i].style.setProperty("background", "#000000", "important");
elem[i].style.setProperty("color", "#ffffff", "important");
}

这也将覆盖＆＃34;！important＆＃34;规则。

您可以通过检索当前值（例如：getProperty（＆＃34; background＆＃34;）;）并添加或替换它来轻松扩展脚本。可以在此处看到向十六进制值添加值的良好函数：Working with hex strings and hex values more easily in Javascript

Answer 3

最有效的方法应该是使用javascript创建一个新的样式元素，并在此样式表中添加一个规则，将字体颜色设置为黑色（或任何你喜欢的颜色）。这样，动态添加到页面的新元素也将遵循css规则。

＆＃13;

function addCSSRule(sheet, selector, rules, index) {
	if("insertRule" in sheet) {
		sheet.insertRule(selector + "{" + rules + "}", index);
	}
	else if("addRule" in sheet) {
		sheet.addRule(selector, rules, index);
	}
}

var sheet = (function() {
	// Create the <style> tag
	var style = document.createElement("style");

	// Add a media (and/or media query) here if you'd like!
	// style.setAttribute("media", "screen")
	// style.setAttribute("media", "only screen and (max-width : 1024px)")

	// WebKit hack :(
	style.appendChild(document.createTextNode(""));

	// Add the <style> element to the page
	document.head.appendChild(style);

	return style.sheet;
})();

addCSSRule(sheet, "*", "color: white !important;");
addCSSRule(sheet, "*", "background-color: grey !important;");

＆＃13;

h1 {
  color: red;
}

span {
  color: green;
}

＆＃13;

<div>
  <h1>HEADING</h1>
  <span>Hallo World</span>
</div>

＆＃13;

来源归因：http://davidwalsh.name/add-rules-stylesheets

如何使用javascript更改所有文本和背景的颜色？

3 个答案: