javascript - 选择时如何缩放字体？

Question

如何缩放（增加）所选文本的大小。我知道通过添加
来更改默认选择的颜色

::-moz-selection {
       background-color: #0092BF;
       color: #FFF;
}
::selection {
       background-color: #0092BF;
       color: #FFF;
}

如何增加或减少所选文本的大小 Only .???

我得到了以上，    我想实现以下   **使用图像编辑器编辑*

Answer 1

As others have stated, this cannot be done purely through CSS. However, here's a JavaScript solution. This assumes you're using jquery 1.4.1+ (probably works with many versions, but this is the one I tested with).

This is a bit clunky, but it will allow you to apply a style to text selected by mouse input only while it is selected. A quick explanation of the functions:

1. reset() removes the styling from any existing selections and gets rid of the extra spans
2. highlight() wraps the selection in a new span node and applies the style
3. getSelected() just returns the selection object. Note that reset() does nothing if you right-click; this is to allow the right-click menu to appear. If you right-click outside of your selection, you won't get the results you're looking for, but that can probably be fixed.

Let me know if you want more detail. Sorry for the huge code block.

<script type="text/javascript">
    $(document).ready(function () {
        $(document).mousedown(reset);
        $(document).mouseup(highlight);
    });

    reset = function (e) {
        var st = getSelected();
        if (st != '') {
            if (e.which != 3) {
                $("span").contents().unwrap();
            }
        }
    };

    highlight = function () {
        var st = getSelected();
        if (st != '') {
            var newNode = document.createElement("span");
            newNode.setAttribute("class", "selectionClass");
            var range = st.getRangeAt(0);
            range.surroundContents(newNode);
            st.selectAllChildren(newNode);
        }
    };

    getSelected = function () {
        var selection = '';
        if (window.getSelection) {
            selection = window.getSelection();
        } else if (document.getSelection) {
            selection = document.getSelection();
        } else if (document.selection) {
            selection = document.selection.createRange().text;
        }
        return selection;
    };
</script>

Answer 2

您不能严格使用 CSS 执行此操作，因为它未包含在规范中。该规范只允许您更改一些基本属性，例如颜色、背景颜色、轮廓和光标。参考： http ://www.w3schools.com/cssref/sel_selection.asp

但是，您可以使用 jQuery/javascript 变通方法为所选文本添加样式。这是另一个使用基于 jQuery 的方法来解决问题的问题。 jQuery 如何将 CSS 应用于选定的文本

Answer 3

您不能使用超过color，background并且background-color在::selectioncss 选择器中，请参阅::selection此处的文档。

您可以通过 jQuery 获取所选文本regexp并使用包装器重新插入它span，但对于一些不寻常的视觉效果来说，这可能太麻烦了。