Получение стиля слова, окружающего текущую позицию курсора

Question

Я пытаюсь получить стиль / полужирный, курсив и т. Д. / Слова в текущей позиции курсора. у меня есть x а также y Координация клика, и я сделал следующее

var range = document.caretRangeFromPoint(x, y);
range.expand('word');
range.queryCommandState('bold');

но это приводит к ошибке, что диапазон не имеет queryCommandState Метод, пока это чтение: http://help.dottoro.com/ljkxwclp.php подразумевает, что диапазон или, по крайней мере, текстовый диапазон (я новичок в JS, так что извините меня за это) имеет такой метод. Любая помощь с благодарностью.

Редактировать: я вроде как обойти это, добавив

var range = document.caretRangeFromPoint(x,y);
range.expand('word');
window.getSelection().addRange(range);
document.queryCommandState('bold');
window.getSelection().empty();

но я не очень доволен этим. Есть ли лучший способ добиться этого?

Answer 1

Я не думаю, что вы можете сделать лучше, чем то, что у вас есть, без написания большого количества кода. IE проприетарный TextRange имеет queryCommandState() и связанные методы, но это никогда не делало это в Range в других браузерах.

Если вы недовольны тем, что вам нужно уничтожить выделение, чтобы выполнить смелое тестирование, тогда я согласен, что оно кажется излишне сложным и неуклюжим, но просто восстановить выделение до исходного состояния. Кроме того, основанный на стандартах способ очистки выбора removeAllRanges() скорее, чем empty(), который является специфичным для WebKit.

Демо: http://jsfiddle.net/GkWTb/1/

Код:

var range = document.caretRangeFromPoint(x, y);
var sel = window.getSelection();
var selRange;

// Save initial selection
if (sel.rangeCount > 0) {
    selRange = sel.getRangeAt(0);
}
range.expand("word");
sel.removeAllRanges();
sel.addRange(range);
alert( document.queryCommandState("bold") );

// Restore original selection
sel.removeAllRanges();
if (selRange) {
    selRange = sel.addRange(selRange);
}