asked on

Javascript get font style from selected text

Hi Experts!

I have below code.
When I select any text on my website and after click special button with funcion wog_qq -
the selected text has been inserted to my textbox.

Ok, but I want copy also font style.
I.E.:
a) If text is bolded, function should detect it and insert [B] [/B] tags.
b) If text is red, function should detect it and insert [COLOR=RED] or [COLOR=#FF0000]
c)If text is red and bolded, function should detect it and insert [B][COLOR=RED]str[/B][/COLOR]

How do it?

<script type="text/javascript">
	<!--
	var textbox = document.getElementById("textbox");
	function wog_qq()
	{
		if (window.getSelection)
		{
			var str = window.getSelection().toString(); 
		}
		else if (document.getSelection) 
		{
			var str = document.getSelection();
		}
		else if (document.selection) 
		{
			var str = document.selection.createRange().text;
		}
		else if (document.selection && document.selection.createRange)
		{
		var range = document.selection.createRange();
		var str = range.text;
		} 
		else
		{
			var str = "error";
		}
	textbox.insert_text(str, false);
	}
	// -->
</script>

Open in new window

Gurvinder Pal Singh

I think you only need to find out the wrapper element of the selected text from where you will find out the style of that particular element.
ie, at the onselect event you will try to

<script>
onselect = checkStyle(event);

function checkStyle(event)
{
var element = event.target;
alert( element.style.font );
}
</script>

WoG

ASKER

Error: 'style' is empty or it isn't a object.

<script type="text/javascript">
        <!--

function wog_qq()
        {
                if (window.getSelection)
                {
                        var str = window.getSelection().toString();
                        //alert( element.style.font ); 
                }
                else if (document.getSelection) 
                {
                        var str = document.getSelection();
                }
                else if (document.selection) 
                {
                        var str = document.selection.createRange().text;
                }
                else if (document.selection && document.selection.createRange)
                {
                var range = document.selection.createRange();
                var str = range.text;
                } 
                else
                {
                        var str = "error";
                }
                var element = str.target;
      			alert(element.style.font);
        	}  			
  			// -->
</script>

Open in new window

jake_0011

You need to move your "var textbox = ..." INSIDE the function wog_qq(){..}
Otherwise when you call wog_qq textbox is always null.

<html>
<head>
<script type="text/javascript">
	<!--
	
	function wog_qq()
	{
	var textbox = document.getElementById("textbox");
		if (window.getSelection)
		{
			var str = window.getSelection().toString(); 
		}
		else if (document.getSelection) 
		{
			var str = document.getSelection();
		}
		else if (document.selection) 
		{
			var str = document.selection.createRange().text;
		}
		else if (document.selection && document.selection.createRange)
		{
		var range = document.selection.createRange();
		var str = range.text;
		} 
		else
		{
			var str = "error";
		}
		textbox.style.fontFamily = 'Arial';
	textbox.insert_text(str, false);
	}
	// -->
	
</script>
</head>
<body>
<textarea id="textbox">HI</textarea>
<label style="color: red; font-family: Arial; font-weight: bold;">Some text to select</label>
<a href="javascript:wog_qq()">link</a>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Gurvinder Pal Singh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

WoG

ASKER

Thanks for all ;)

WoG

ASKER

Ok.
Above code working, but it give me style information about style all of element.

Example:
<div style="font: red;">
text<span style="color: green;">green</span>texttexttext
</div>

If I select text "green" > alert will be "red".
How to get style from selected text?