?
Solved

Javascript get font style from selected text 2

Posted on 2010-01-01
9
Medium Priority
?
806 Views
Last Modified: 2012-05-08
Hi again!

I have code javascript to get style parameters from element of selected text.

Ok.
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 only selected text?

document.onmouseup = function(e) 
{
   var evt = window.event || e;
   if(window.getSelection)
   {
        t = window.getSelection();
   }
   else if(document.getSelection)
   {
        t = document.getSelection();
   }
   else if(document.selection)
   {
        t = document.selection.createRange().text;
   }            
   if (t.length > 0) 
   {
        alert(t);
   }
  alert ( evt.srcElement.style.color);
}

Open in new window

0
Comment
Question by:WoG
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 10

Expert Comment

by:mstrelan
ID: 26159545
the srcElement is the element that triggered the event ... so if you let go of the mouse button over the red text it will say red
0
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 1000 total points
ID: 26160972
you can copy the HTML text instead, try this
document.selection.createRange().htmlText

see this link for reference
http://www.quirksmode.org/dom/w3c_range.html#
0
 
LVL 5

Assisted Solution

by:siddagrl
siddagrl earned 1000 total points
ID: 26161312
@WoG

your code seems to work fine, see the attached image...
(i tried in IE6, in chrome / firefox it does not give the alert)

i have clubbed both alerts in a single one.
        alert("color of '" + t + "' is " + evt.srcElement.style.color);

Also i think you meant "color: red" instead of "font: red" in your code.
<html>
<body>
<script>
document.onmouseup = function(e) 
{
   var evt = window.event || e;
   if(window.getSelection)
   {
        t = window.getSelection();
   }
   else if(document.getSelection)
   {
        t = document.getSelection();
   }
   else if(document.selection)
   {
        t = document.selection.createRange().text;
   }            
   if (t.length > 0)
   {
        alert("color of '" + t + "' is " + evt.srcElement.style.color);
   }
}
</script>
<div style="color: red;">
      text<span style="color: green;">green</span>texttexttext
</div>
</body>
</html>

Open in new window

selectedText.JPG
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:WoG
ID: 26162521
Ok.
How insert above function(e) to my function wog_qq() ?

0
 
LVL 5

Assisted Solution

by:siddagrl
siddagrl earned 1000 total points
ID: 26164424
This should be simple.
see the attached code...
<html> <body>

<script type="text/javascript">

document.onmouseup = function(e) { wog_qq(e); }

function wog_qq(e)
{
    eventHandling(e);
    // your stuff here
}

function eventHandling(e)
{
   var evt = window.event || e;
   if(window.getSelection)
   {
        t = window.getSelection();
   }
   else if(document.getSelection)
   {
        t = document.getSelection();
   }
   else if(document.selection)
   {
        t = document.selection.createRange().text;
   }            
   if (t.length > 0)
   {
        alert("color of '" + t + "' is " + evt.srcElement.style.color);
   }
}
</script>

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

</body> </html>

Open in new window

0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26208460
@WoG: Have you found the solution? please post the answer.
Or else, please post where are you stuck.

Thanks
0
 

Author Comment

by:WoG
ID: 26272372
Sorry.
document.onmouseup just work only IE :(
0
 

Author Comment

by:WoG
ID: 26274110
I need this function when I click button.
0
 
LVL 40

Assisted Solution

by:Gurvinder Pal Singh
Gurvinder Pal Singh earned 1000 total points
ID: 26347089
Yes you can.

<input type='button' id='but1' onclick='eventHandling(window.event)'>

Now you can call the same eventHandling handling method from here
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question