【问题标题】：how to change the color of selected text in css for jquery mobile div如何为jquery mobile div更改css中选定文本的颜色
【发布时间】：2013-06-16 20:27:42
【问题描述】：

我想将所选文本的颜色更改为 #3C3 以用于 div 1 而不是 div 2。

<!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;
}

上面的代码不起作用。有人可以帮我解决这个问题吗？

【问题讨论】：

您使用什么浏览器来测试您的功能？查看here 以检查支持此伪元素的浏览器列表。顺便说一句，对于 mozilla，您应该使用 ::-moz-selection
我正在使用谷歌浏览器
它有效，但仅适用于背景：jsfiddle.net/Gajotres/Y84W3

标签： jquery css jquery-mobile mobile textselection

【解决方案1】：

这里是如何，JQ方式DEMO http://jsfiddle.net/yeyene/GYuBv/6/

JQUERY

$(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>

【讨论】：

【解决方案2】：

如果您的移动浏览器不支持::selection伪元素，那么您可以做的是使用JavaScript触发元素上的文本选择更改，并将div中的选定文本替换为具有指定颜色的span .

【讨论】：