如何使用颜色选择器来改变背景的文本内容

时间:2016-05-04 10:41:04

标签: javascript jquery

颜色选择器的功能没有进入所需的领域

    <input class="jscolor {onFineChange:'update(this)'}" value="choose color">
    <iframe  name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;">
<script type="javascript" src="js/jscolor.js"></script>

<script>
function update(jscolor) {

// 'jscolor' instance can be used as a string
document.getElementById('richTextField').style.backgroundColor = '#' + jscolor

}
  </script>

我希望当用户点击文本字段时,颜色选择器将打开用户选择他想要的颜色,然后在iframe中写入的文本应该是那种颜色

1 个答案:

答案 0 :(得分:0)

为您解决此问题。此示例演示了更改背景。要更改文字颜色,您可以定义iframe来源并将“y.body.style.backgroundColor = '#' + jscolor;”替换为“y.body.style.color = '#' + jscolor;”。这是代码段:

<script src="http://jscolor.com/release/2.0/jscolor-2.0.4/jscolor.js"></script>    

<input class="jscolor {onFineChange:'update(this)'}" value="choose color">

 <iframe id="richTextField" height="200" width="600"></iframe>

<script>
function update(jscolor) {
    var x = document.getElementById("richTextField");
    var y = (x.contentWindow || x.contentDocument);
    if (y.document)y = y.document;
    y.body.style.backgroundColor = '#' + jscolor;
}
</script>

View Snippet