javascript - 如何使用按钮更改文本颜色
问题描述
我正在修改我们在工作中使用的页面。这个页面是一个本地的html页面,它的大部分功能都使用了一个js文件。我已经能够解决一些问题并使其在 Chrome 中运行(之前它只在 IE 中运行良好)。但现在我正在尝试使用一些按钮或输入来更改文本的背景和颜色。
这纯粹是为了美观,不需要解决,我只想知道我做错了什么,这样我就可以让未来的项目变得更好。使用输入文件类型的不断变化的背景工作得很好。现在我只是试图通过使用输入类型颜色来更改整个文档(包括元素,但我还没有在代码中到达那里)中文本的颜色。我尝试设置一个事件侦听器,就像我用于背景图像一样,但它不起作用。我可能完全做错了什么。
这是html部分的代码...
<html lang="en">
<head>
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
<title>
CADI - Life
</title>
<style>
</style>
</head>
<body background="https://is5-ssl.mzstatic.com/image/thumb/Purple111/v4/11/4c/0e/114c0e6a-eb12-8158-a1c7-64632cfd6a3f/source/512x512bb.jpg" text="white" onclick="changeTabs()" onload="init()">
Choose your Background!<br>
<input type='file' id='getval' name="background-image" />
<input type="color" id="textColor" name="favcolor" value="#FFFFFF">
这里是 JavaScript...
document.getElementById('getval').addEventListener('change', readURL, true);
function readURL(){
var file = document.getElementById("getval").files[0];
var reader = new FileReader();
reader.onloadend = function(){
document.body.style.background = "url(" + reader.result + ") black no-repeat center";
}
if(file){
reader.readAsDataURL(file);
}else{
}
}
document.getElementById('textColor').addEventListener('change', changeText, true);
function changeText(){
var color = document.getElementById("textColor").value
var looker = new ColorLooker();
looker.onloadend = function(){
document.body.style.text = "looker.result";
}
if(color){
looker.color
}else{
}
}
当我在颜色输入上选择一种颜色时,我希望颜色会发生变化。当我选择一种颜色时,什么也没有发生,控制台告诉我 ColorLooker 未定义。
解决方案
**尝试替换这个**
当您需要更改文档上的文本颜色时,您必须使用 body.color css 格式。
https://www.w3schools.com/css/css_text.asp
document.getElementById('textColor').addEventListener('change', changeText, true);
function changeText(){
var color = document.getElementById("textColor").value
document.body.style.color = color;
}
推荐阅读
- spotfire - Spotfire:编辑交叉表的标题
- php - 定位多余的空格,但保留新行
- sql - oracle sql中的条件不能正常工作,因为有时为空
- sql-server - 如何在 Microsoft SQL Server 中对临时表中的所有列求和,就像 Pandas 中的值计数一样
- excel - 如何选择所有完整的单元格并复制到其他文档 vba
- c# - 来自 ML.NET 的正弦预测并没有真正起作用
- excel - 计算excel单元格中每个单词的字符数
- redis - Redis 流水线何时变得更高效?
- c# - 开发工具包 AWS 和 Lambda 函数
- php - 解密 CakePHP 1.2 数据