个人中心
gpt4 book ai didi

javascript - 如何在JavaScript中使用color类型的输入元素来更改可编辑iframe中显示的字体颜色

转载 作者：行者123 更新时间：2023-12-02 22:50:33 26 4
gpt4 key购买 nike

总而言之，我正在尝试：

-获得他们选择的颜色

-设置一个等于他们选择的颜色值的变量

-使用该变量为iframe中的所选文本或当前文本着色

目标：
我正在尝试通过构建交互式Business Canvas模型（具有9个部分的网格来计划任何业务）来自学JavaScript。我对这种解决方案以及对我正在犯的错误以及为什么是错误的任何观察都感兴趣。我看了几个小时的教程，事情开始变得有意义，但是现在，当我试图用自己的语言写我自己的陈述时，我发现自己完全迷失了。我实际上有很多问题，但是我问的是这个问题，因为我认为了解我在此问题上所犯的错误将向我展示其他事物的实际工作方式。

我最初使用的是textarea而不是iframe，但想在文本框中添加一些格式设置按钮。这些按钮之一是使用选择器选择颜色的能力。我可以在前端选择一种颜色，但是然后该颜色就放在盒子里了，我正在努力弄清楚如何使用JavaScript来抓取颜色，并使它更改所选字体或当前字体的颜色。

目前，我在Udemy上的在线JavaScript课程“ JavaScript，了解奇怪的部分”中占58％。我也看过令人尴尬的YouTube视频，其中有几个使用各种颜色选择器和滑块，但是没有显示如何执行此操作的方法，如果您精通该语言，我天真的认为这很简单。

iFrame（启用了designMode）的名称为partnersRTF

重复出现的错误消息：“输入的意外结束”

HTML代码段：

<input type="color" id="js-fontColor" oninput="fontColorFunc('this');" value="#b3130b"/>

这是它调用的函数（有一天可能会让我难堪）：

  var colorValue = document.getElementById("js-fontColor");
  document.partnersRTF.document.style.color = "colorValue";
  console.log("colorValue");
}


console.log是我测试如何查看该功能是否从颜色输入接收到值的方法。我没有收到值，只是错误消息。

老实说，我没想到这行得通，但我无法阐明为什么行不通。我首先声明一个变量，知道要在其中存储颜色值。然后，我尝试使用getElementById方法将该值设置为等于颜色选择器接收的输入。然后，我将iframe作为目标，并尝试使用style.color将“颜色”设置为等于存储的colorValue。但是这里什么也没有，我什至无法想到，它告诉文档给字体上色。

我的功能出了什么问题？以及如何获取javaScript以查看选择了哪种颜色，然后在iframe中更改字体的颜色？

编辑

这是所请求的代码，与名为partnerRtf的iframe有关：
抱歉，我不想粘贴完整的文档，这很多。 

    </div>
    <iframe name="partnersRTF"></iframe>
  </div>


这是9个部分之一。在文档的开头，我在body元素中使用onload调用了一个函数，它以iframe为目标并打开designMode。这使iframe区域可以直接进行编辑，而这正是我需要控制字体颜色的地方。

编辑2

谢谢你们！我现在有新错误，但这绝对是菜鸟错误，它发送字符串而不是变量:)

我删除了colorValue上的引号： 

  var colorValue = document.getElementById("js-fontColor");
  document.partnersRTF.document.style.color = colorValue;
  console.log(colorValue);
}


现在错误消息显示为：
“未捕获的TypeError：无法设置未定义的属性'颜色'
    在fontColorFunc（businessCanvasModel.js：23）
    在HTMLInputElement.oninput（index.html：37）“

我在先前的尝试中也遇到过相同的消息，所以我肯定是重复的错误。我能想到的是，当解释器读取javaScript时，它将在运行代码之前对其进行区域划分并将所有变量设置为等于undefined，这意味着在运行代码时，它未将colorValue设置为等于undefined以外的任何值。 ，我尝试将颜色值赋予变量的方式存在问题。换句话说，该变量保持未定义状态，因为它没有接收到颜色值。我最初想知道这是否是因为颜色值是黑色（0,0,0），但这仍然是一个值，不是不确定的，我将该值更改为红色。

所以，我仍然有同样的问题……我还做错了什么？

编辑3

我已经根据给出的答案对代码进行了更改，但仍然存在特定的问题：如何为当前选择的字体和将要键入的字体上色。我使用的当前代码在整个iframe中为字体着色。这使得选择字体颜色毫无意义，因为着色字体的目的是使所选字体突出。

这是html的一个片段，包括iframe和指向外部文件的链接，这些链接可能有助于准确推断如何在iframe本身中定位字体，请注意h3与该问题无关。 

<title>Business Canvas Model</title>
<meta charset = "utf-8" />
<link rel = "stylesheet" type = "text/css" href="businessCanvasModel.css"/>
<script src="businessCanvasModel.js"></script>
<script src="https://kit.fontawesome.com/d58f589ed9.js" crossorigin="anonymous"></script>
</head>

<body>
<div class="grid-container">
  <h1 class="heading">Business Canvas Model</h1>


  <div class="partners">
    <h3>Key Partners <button onclick="keyPartnersDef()"><i class="fas fa-question"></i></button></h3>
    <div class="editorControls">
        <input type="color" id="js-fontColor" oninput="fontColorFunc('this');" value="#b3130b"/>
    </div>
    <iframe name="partnersRTF"></iframe>
  </div>


这是在iframe中打开designMode的JavaScript 

window.onload = function enableEditMode() {
  partnersRTF.document.designMode="on";
}


这是颜色选择器的功能： 

function  fontColorFunc() {
var colorValue = document.getElementById("js-fontColor");
document.partnersRTF.document.body.style.color=colorValue.value;


成功是我们成功获得了颜色值，但是我该如何仅将选定的或将要键入的字体作为目标呢？

编辑4

我已经按原样上传了我的项目，成功进行更改后，我将更新实时网站。对于那些好奇并且可能有用的人，这里是这个项目的链接：

http://business-model-canvas.neeleyarts.com/

最佳答案

在本地运行时，以下代码可正常工作



<iframe name="partnersRTF" >some text</iframe>
<input type="color" id="js-fontColor" oninput="fontColorFunc('this');" value="#b3130b"/>
<script>
window.onload = function() {
    var iframes = document.getElementsByTagName('iframe');
    for (var i = 0, len = iframes.length, doc; i < len; ++i) {
        doc = iframes[i].contentDocument || iframes[i].contentWindow.document;
        doc.body.innerHTML ="some text";
        doc.designMode = "on";
    }
};
function  fontColorFunc (){
var colorValue = document.getElementById("js-fontColor");
document.partnersRTF.document.body.style.color=colorValue.value ;
}
</script>

关于javascript - 如何在JavaScript中使用color类型的输入元素来更改可编辑iframe中显示的字体颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58195332/

26 4 0
文章推荐： c# - 从 WindowsAzure.Storage 迁移到 Azure.Storage 包时引用 CloudStorageAccount 中的服务
文章推荐： elasticsearch - 如何从Logstash递增文档的计数字段？
文章推荐： IntelliJ 上的 Hibernate 激活
文章推荐： elasticsearch - 在Elasticsearch中过滤值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com