【问题标题】:How to change text color using a button如何使用按钮更改文本颜色
【发布时间】:2019-12-17 09:19:05
【问题描述】:

我正在修改我们在工作中使用的页面。这个页面是一个本地的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 未定义。

【问题讨论】:

  • 出于好奇,为什么是 Java 标签?它们实际上是完全不相关的语言,而这似乎与该语言没有任何关系。
  • 那是我的错。我输入了java,它就在那里。感谢您的编辑!

标签: javascript button text colors


【解决方案1】:

**尝试替换这个**

由于您需要更改文档上的文本颜色,您必须使用 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;

    }

【讨论】:

  • 你太棒了!这完美无缺。我想我只是想让它变得太复杂。
  • 嘿@0kazaki101,如果您发现它是完美的解决方案,请您接受它作为最佳答案。谢谢
猜你喜欢
  • 1970-01-01
  • 2012-06-25
  • 1970-01-01
  • 2020-11-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-11-12
  • 2013-06-05
相关资源
最近更新 更多