Javascript 如何在jquery中更改单词的颜色

我如何才能选择一个单词并更改该单词的颜色

e、 g.添加带有样式的跨距，并更改字体颜色

有人能带我走正确的路吗

Jquery

 function edit_addon (div_id) {    
    $("#"+div_id).attr ('contentEditable', true)
             .css ('color','#F00') 
             .css ('cursor','Text') 
             ; 

 } 

HTML

 <div id="34" ondblclick="javascript:edit_addon(34)">Editable Text</div>

可编辑文本

---

谢谢你，

这应该适合你。一般来说，给元素一个类，然后在

ready

函数中（见这里的简图）设置页面的任何动态方面要容易得多

<style type="text/css">
    .Word { color:#F00;cursor:text;padding:20px; }
</style>
<script type="text/javascript">
    $(function () {
        $("div.Editable").each(function () {
            var elem = $(this),
                text = elem.text(),
                words = text.split(" "),
                innerHtml = "<span>" + words.join("</span>&nbsp;<span>") + "</span>";
            elem.html(innerHtml);
        });
        $("div.Editable span").live("dblclick", function (evt) {
            $(this)
            .attr({ contentEditable: true })
            .addClass("Word");
        }).live("mouseout", function () {
            var elem = $(this);

            elem
            .attr({ contentEditable: false })
            .removeClass("Word");

            var text = elem.text(),
                words = text.split(" "),
                innerHtml = "<span>" + words.join("</span>&nbsp;<span>") + "</span>";

            elem.replaceWith($(innerHtml));
        });
    });
</script>

<div id="Editable34" class="Editable">
    Editable Editable Editable
</div>

.Word{color:#F00；光标：文本；填充：20px；}
$（函数（）{
$（“div.Editable”）。每个（函数（）{
var elem=$（此），
text=elem.text（），
单词=文本。拆分（“”），
innerHtml=”“+单词。连接（“”+“”）；
html（innerHtml）；
});
$（“div.Editable span”）.live（“dblclick”，函数（evt）{
$（本）
.attr（{contentEditable:true}）
.addClass（“Word”）；
}).live（“mouseout”，函数（）{
var elem=$（本）；
元素
.attr（{contentEditable:false}）
.removeClass（“Word”）；
var text=elem.text（），
单词=文本。拆分（“”），
innerHtml=”“+单词。连接（“”+“”）；
元素替换为（$（innerHtml））；
});
});
可编辑的

最简单的方法是在div中动态添加带有个人的跨距，只需更改当前跨距的颜色即可。基本思路如下：

$(".Editable").dblclick( function () {
    var words = $(this).text().split(" ");
    var result = "";
    for (var i=0; i<words.length; i++) {
        result.append("<span class='word'>" + words[i] + "</span>");
    }
    $(this).innerHTML = result;
}

#CSS

span.word:hover { color: #0f0; }

$（.Editable”）.dblclick（函数（）{
var words=$（this.text（）.split（“”）；
var结果=”；
对于（var i=0；唯一的问题是当一个
div
中有多个单词时，整个内容将变为可编辑。@SimpleCode-我的阅读理解再次失败，让我来解决这个问题。@SimpleCode-我对此不100%满意，但我现在不能做OPs工作，可以吗？
id
属性不能以中的数字开头HTML和您的代码将无法验证。它们必须以[A-Za-z]开头-您可能应该避免在数组上使用“
for…in”
。“
for…in”
用于迭代对象属性，因此如果修改了数组原型，这些属性名称将包含在结果中。@Andy E，谢谢，我在语言之间做了太多的思维转换。编辑：）