Question

好的..所以我有一个显示当前值的html元素，值通过范围滑块更改，我使用javascript更改html元素的值，代码如下：

hex_out = document.querySelector('#hex');
hex_out.value=rangeValue;

以上哪项工作正常，但最近我需要能够在hex_out.value中添加一些HTML代码

例如，如果我尝试

hex_out.value="<font color='red'>"+rangeValue+"</font>"

它会将hex_out.value更改为下面显示的代码

<font color='red'>Range slider value</font>"

这显然不是我想要完成的事情。如何将html代码添加到hex_out.value并正确显示？

在任何人试图说＆＃34;这是一个重复的问题＆＃34;，意识到我已经尝试了几乎所有解决方案上显示的堆栈溢出没有运气

编辑：这是一些图片：

它应该是这样的：

但是在更改范围滑块值后，它会显示：

注意它不应该显示HTML代码的方式？好吧，这就是我的问题:(

编辑：谢谢stackoverflow社区！我得到了你所有的帮助，谢谢！

Answer 1

您需要通过元素的样式属性修改颜色。请尝试以下方法：

hex_out.style.color = 'red';

如果您需要添加任何HTML，那么（假设hex_out元素是容器元素而不是<input>标记），您可以将HTML分配给其innerHTML财产如此：

hex_out.innerHTML = '<strong>This is a <em>formatted</em> value.</strong>';

另一个编辑：看起来您正在使用<output>元素，据我所知，该元素并不接受子元素。在这种情况下，您可能希望使用常规<div>或<span>代码而不是<output>，然后在滑块使用{{1}移动时手动更新其值上面描述的属性。

Answer 2

我认为你正在寻找这样的东西：

var hex_out = document.querySelector('#hex'),
    rangeValue = document.querySelector('#val');

rangeValue .addEventListener('input', function () {
  hex_out.innerHTML = "<font color='red'>"+rangeValue .value+"</font>";  
}, false);

<input type=range id=val>
<span id=hex>50</span>

Answer 3

您提供的示例是通常期望来自javascript的内容。我认为你想要改变现有元素的html而不是值。如果是，您可以使用以下代码：

hex_out. innerHTML ="<font color='red'>"+rangeValue+"</font>"

现有小提琴链接JSFiddle

经过测试和工作：

function setColor() { debugger;
  Rval = parseFloat((r_out.value / 255.00).toFixed(3));
  Gval = parseFloat((g_out.value / 255.00).toFixed(3));
  Bval = parseFloat((b_out.value / 255.00).toFixed(3));
  hex = "R: " + Rval + " " + "G: " + Gval + " " + "B: " + Bval;
  var r_hex = parseInt(r.value, 10).toString(16),
    g_hex = parseInt(g.value, 10).toString(16),
    b_hex = parseInt(b.value, 10).toString(16),
    hex1 = "#" + pad(r_hex) + pad(g_hex) + pad(b_hex);
  body.style.backgroundColor = hex1;
  hex_out.innerHtml = hex + [
'<br/><font size="1px">GSC RGB Selector by thahitcrew</font>'
].join('#hex');
}

Answer 4

您遇到的困难是因为您在font tag中放了一个过时的output tag，它只接受＆＃34;措辞内容＆＃34;。 HTML5中不支持字体标记，而不是在措辞内容元素列表中。

正如@Mark所说，如果你需要渲染HTML，就会有一个简单的div。

将html代码添加到javascript变量中

4 个答案: