Javascript如何传递变量和设置颜色答案

【问题标题】：Javascript how to pass variable and set colorJavascript如何传递变量和设置颜色
【发布时间】：2015-12-22 05:53:48
【问题描述】：

我有两个文本区域

<textarea id="area1">Hello how are you</textarea>
<textarea id="area2"></textarea>

我想将 area1 的值传递给 area2 并显示，然后将“你好”设置为红色，“你好吗”设置为绿色

var area1=document.getElementById("area1");
var area2=document.getElementById("area2");

如何在 JavaScript 中做到这一点？谢谢

【问题讨论】：

你不能使用 textarea 来做到这一点，而是可以使用 contenteditable div 并使用 span 包装文本并为其设置样式
点击按钮还是什么？
@托管资源 onkeyup()
@Nick : 他需要单独的文字颜色

标签： javascript html

【解决方案1】：

要传输文本，您可以使用 textarea 的 innerHTML 属性：

area2.innerHTML = area1.innerHTML;

这是一个jsFiddle。

但对于红色部分，难度会更大。

您将无法为此使用 2 textarea。您必须创建另一个容器并将其样式设置为 textarea。

这是一个快速的solution，第二个元素是div，而不是textarea。

我没有设置第二个元素的样式。

var area1=document.getElementById("area1");
var area2=document.getElementById("area2");
var regex = /Hello/g;

area2.innerHTML = area1.innerHTML.split(regex)
                    .join('<span style="color:red;">Hello</span><span style="color:green;">')
                    + '</span>';

编辑：忘了绿色部分。

【讨论】：

【解决方案2】：

有很多方法可以做到这一点：

使用基本代码

HTML：

<div id="boom1">Some random text1</div>

JavaScript：

let element1 = document.getElementById("boom1")
element1.style.color = "red";
element1.style.fontWeight = "bold";
element1.style.fontSize = "2em";

使用 .cssText

HTML：

<div id="boom2">Some random text2</div>

JavaScript：

let element2 = document.getElementById("boom2").style.cssText =  "color: blue; font-weight: bold; font-size: 2em"

使用 Object.assign()

HTML：

<div id="boom3">Some random text3</div>

JavaScript：

let object1 = document.getElementById("boom3")
let styles = {color: "green", fontWeight: "bold", fontSize: "2em"}
let element3 = Object.assign(object1.style, styles)

或者简单地说（不分解成变量）：

let element3 = Object.assign(document.getElementById("boom3").style, {color: "green", fontWeight: "bold", fontSize: "2em"})

使用 jQuery

HTML：

<div id="boom4">Some random text4</div>

JavaScript：

$("#boom4").css({color: "orange", fontSize: "2em", fontWeight: "bold"})

【讨论】：

【解决方案3】：

这很容易做到。查看下面的代码。

(function(){
    'use strict';

    // get button
    var button = document.getElementById('button');

    if (window.addEventListener) {
        // listen for clicks.
        // If button is clicked, execute doTheMagic()
        button.addEventListener('click', doTheMagic, false);
    }

    function doTheMagic() {
        // get both text areas
        var area1 = document.getElementById('area1');
        var area2 = document.getElementById('area2');

        // change colors
        area1.style.color = 'red';
        area2.style.color = 'green';

        // copy and paste value
        area2.value = area1.value;
    }
})();

另外，请查看demo。

【讨论】：

【解决方案4】：

获取text value from area1 is easy：

v = document.getElementById("area1").value

设置也是如此...

document.getElementById("bla").value = v;

但着色是不可能的：您会需要一个包装<span> 或其他标签，以应用不同的样式。但是tags are not allowed within textarea。

您可能想要的是一个（方式）更复杂的基于 javascript 的文本编辑器，它在各种视觉“文本区域”内支持颜色（或粗体，或其他更复杂的格式）......

你也可以看看...

<div contenteditable="true"></div>

【讨论】：