How do I check if the text under the cursor in a contenteditable div is "bold"

Question

Possible Duplicate:
Identify whether the selected text in a web page is bold nor not

I've created a contenteditable div, and this was straightforward enough.

I have as well added a control on top of the div to bold and unbold the text.

Now, I would like to style the button based on the bold status of the text under the cursor - ie: if the text under the cursor is bold, I would like the bold icon to have border 'inset'... and if it's not bold, I would like the bold icon to be without a border.

How can I check the style of the element under the cursor?

Link to the code as it is now: http://jsfiddle.net/aCp7M/

I have added in a link to my code. I would like the icon "B" to show with a border when the text under the cursor is bold. — Alterlife, Oct 04 '12 at 19:55

Igor Shastin · Accepted Answer · 2012-10-04T23:16:05.197

12

Here you are: http://jsfiddle.net/vvCzD/

Use document.queryCommandValue("Bold") to check that text at the caret position is bold and so on. All possible command identifiers are described here.

UPD: As Tim stated below, a correct method for getting boolean-like properties is queryCommandState.

edited Oct 04 '12 at 23:16

answered Oct 04 '12 at 20:35

Igor Shastin

2,878
2
25
38

6

I believe `document.queryCommandState("Bold")` is the correct method for bold. `queryCommandValue()` is used for commands that have a value (such as "fontName") rather than just toggling. – Tim Down Oct 04 '12 at 22:33
1

Here's an updated jsFiddle: http://jsfiddle.net/vvCzD/1/ – Tim Down Oct 04 '12 at 22:37
@TimDown, thanks for the hint. You are completely right. – Igor Shastin Oct 04 '12 at 22:48

How do I check if the text under the cursor in a contenteditable div is "bold"

1 Answers1