javascript - 如何在选中时缩放字体？

Question

如何缩放(增加)所选文本的大小。
我知道通过添加

更改默认所选颜色

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

如何增大或减小仅选定文本的大小？？？

i am getting the above,    i Want to achieve the below   **Edited using image editor*

Answer 1

正如其他人所说，这不能仅通过 CSS 来完成。但是，这里有一个 JavaScript 解决方案。这假设您使用的是 jquery 1.4.1+(可能适用于许多版本，但这是我测试过的版本)。

这有点笨拙，但它允许您仅在选中时将样式应用于通过鼠标输入选中的文本。功能的快速解释:

1. reset() 从任何现有选择中删除样式并摆脱额外的跨度
2. highlight() 将选择包裹在一个新的 span 节点中并应用样式
3. getSelected() 只返回选择对象。请注意，如果您单击鼠标右键，则 reset() 不会执行任何操作；这是为了让右键单击菜单出现。如果您在选择范围外右键单击，您将得不到想要的结果，但这可能可以解决。

如果您需要更多详细信息，请告诉我。抱歉代码块太大。

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