使用 JS 抓取 HTML 文本选择的 CSS

Question

我 creating a text editor 使用 HTML、CSS 和 JS。我已经解决了大部分功能，尽管它已被弃用，但我一直在使用 document.execCommand() 对 contenteditable div 中的文本内容进行样式化。我在屏幕顶部有一个快捷栏，其中包含用于更改字体、更改大小、粗体、斜体、下划线等的所有按钮。与 google 文档类似，我希望顶部栏更新其值以匹配选择的任何文本。多亏了这个网站上的另一个 post：

，我有一个函数可以抓取文本选择的 HTML

function getHTMLOfSelection () {
    var range;
    if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        return range.htmlText;
    }
    else if (window.getSelection) {
        var selection = window.getSelection();
        if (selection.rangeCount > 0) {
            range = selection.getRangeAt(0);
            var clonedSelection = range.cloneContents();
            var div = document.createElement('div');
            div.appendChild(clonedSelection);
            return div.innerHTML;
        }
        else {
            return '';
        }
    }
    else {
        return '';
    }
}

但我不知道如何抓住整个事情的css。例如，如果选择的一半是 Arial 字体，另一半是 Serif。我希望它选择第一个。但我什至不知道如何开始获得 CSS。这是我目前所拥有的：

function updateControlBar() {
    selection = getHTMLOfSelection();
    if (typeof selection != "undefined") {
        // Get the selection's font and update the font menu to show it.
        document.getElementById('font-button').value = selection.fontFamily;
        document.getElementById('font-button').style.fontFamily = selection.fontFamily;
        console.log(selection.fontFamily);
    } else {
        console.log("No selection, cannot update control bar values.");
    }
}

感谢您的帮助！

Answer 1

看来您现在可以使用 getComputedStyle()。

尝试以下操作：

var bEl =  document.querySelector("body"); 
getComputedStyle(bEl);

你会看到：

我在这个页面上运行它（通过控制台），我看到列出了 400 多个 css 属性。

CSS2Properties(486)

使用 JS 抓取 HTML 文本选择的 CSS

Grabbing the CSS of an HTML text selection using JS

html

javascript

css

selection

textselection