Изменить выделение текста с помощью JS - PullRequest
Новая
       33

Изменить выделение текста с помощью JS

5 голосов
/ 07 августа 2010

Для стандартных браузеров вы можете использовать что-то вроде этого для изменения цвета выделенного текста: 

div.txtArea::selection {
 background: transparent;
}

div.txtArea::-moz-selection {
 background: transparent;
}

div.txtArea::-webkit-selection {
 background: transparent;
}

Но мне нужно сделать это с помощью JavaScript.

Мои пользователи могут выбирать текста затем измените цвет.Пока они выбирают другой цвет, он постоянно обновляет цвет.Поскольку текст выделен, они не могут видеть, как выглядит цвет.Мне нужно изменить стиль выделения целевого элемента, чтобы он был прозрачным только при наведении курсора на средство смены цвета.

Я пробовал несколько вещей, в том числе: 

$('div.txtArea').css({
    'selection': 'transparent',
    '-moz-selection': 'transparent',
    '-webkit-selection': 'transparent'
});

Есть ли способсделать это с помощью JavaScript?

1 Ответ

6 голосов
/ 07 августа 2010

Нет интерфейса DOM для манипулирования псевдоклассами. Единственное, что вы можете сделать, это добавить правила в таблицу стилей. Например: 

// Get the first stylesheet 
var ss = document.styleSheets[0]

// Use insertRule() for standards, addRule() for IE
if ("insertRule" in ss) {
    ss.insertRule('div.txtArea::-moz-selection { background: transparent; }', 0);    
    ss.insertRule('div.txtArea::selection { background: transparent; }', 0);    
    ss.insertRule('div.txtArea::-webkit-selection { background: transparent; }', 0);    
}

Вы можете получить доступ к правилам и изменить их, используя stylesheet.cssRules [index] .style , stylesheet.rules [index] .style для IE, где он получает немного больше сложный.

Я не включил пример IE6-8, используя addRule () , потому что эти версии IE не поддерживают ::selection.

...