[英]How to change a colour of a word in jquery
我如何能够选择一个单词并改变那个单词的颜色?
例如,添加带样式的跨度并使字体颜色变化。
请有人带领我走正确的道路。
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>
谢谢,
最简单的方法是在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; }
这应该适合你。 一般来说,为元素提供一个类,然后在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> <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> <span>") + "</span>";
elem.replaceWith($(innerHtml));
});
});
</script>
<div id="Editable34" class="Editable">
Editable Editable Editable
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.