如何在jQuery Mobile div的css中更改所选文本的颜色 [英] how to change the color of selected text in css for jquery mobile div
本文介绍了如何在jQuery Mobile div的css中更改所选文本的颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将div而不是div 2的选定文本的颜色更改为#3C3.
I want to change the color of selected text to #3C3 for the div one not div two.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile-1.3.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="scripts/jquery.mobile-events.min.js"></script>
<script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
<link rel="stylesheet" href="css/test.css" />
<script type="text/javascript" src="scripts/jquery.xpath.js"></script>
<script type="text/javascript" src="scripts/test.js"></script>
</head>
<body>
<div data-role="page" id="test-page" class="bg_main">
<div data-role="header" id="bookmarkheader">.............. ...............</div>
<div data-role="content" id="content" class="content_bg">
<div class="one">some text</div>
<div class="two">some text</div>
</div>
<div data-role="footer" id="footer_main">................. .................</div>
</div>
</body>
</html>
CSS
.one::selection {
background-color:#3C3;
}
以上代码无效.有人可以帮我吗?
The above code didnt work. Can somebody please help me with this?
推荐答案
这是JQ方式演示的方式 http://jsfiddle.net/yeyene/GYuBv/6/
Here is how, JQ way DEMO http://jsfiddle.net/yeyene/GYuBv/6/
$(function() {
$('div.one').mouseup( function() {
var mytext = selectHTML();
$('.one span').css({"color":"red"});
});
});
function selectHTML() {
try {
if (window.ActiveXObject) {
var c = document.selection.createRange();
return c.htmlText;
}
var nNd = document.createElement("span");
var w = getSelection().getRangeAt(0);
w.surroundContents(nNd);
return nNd.innerHTML;
} catch (e) {
if (window.ActiveXObject) {
return document.selection.createRange();
} else {
return getSelection();
}
}
}
HTML
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<div class="one"><p>The quick brown fox jumps over the lazy dog</p></div>
<div class="two"><p>The quick brown fox jumps over the lazy dog</p></div>
</div>
</div>
这篇关于如何在jQuery Mobile div的css中更改所选文本的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
