www.webdeveloper.com
Results 1 to 12 of 12

Thread: Can't Get Text Color in Safari

  1. #1
    Join Date
    Jun 2005
    Posts
    20

    Can't Get Text Color in Safari

    I'm trying to get the text color in Safari. The attributes for both divs are specified in the style section. In addition for div2 the color is also specified in HTML inline style.

    When div1 is clicked the alert message doesn't give the color but the color is given when div2 is clicked. In other words the javascript doesn't seem to be reading the color specified in the style section.

    When I try this with IE (and using currentStyle in place of style) the alert gives the color for both divs.

    What do I need to do to get the text color in Safari (apart from using inline style).

    Code:
    <!DOCTYPE html>
    <html>
    <head><title>Text Color</title>
    
    <script language="javascript">
    
    function getColor(el){
    	var d = document.getElementById(el);
    	alert(d.id + " text color is " + d.style.color);
    }
    </script>
    
    <style type="text/css">
    
    .divClass {
    	height: 50px;
    	top: 100px;
    	width: 100px;
    	font-family: "Arial";
    	font-size: 24pt;
    	font-weight: bold;
    	text-align: center;
    	background-color: #ffffff;
    	color: #0000ff;
    	position: absolute;
    }
    #div1 {
    	left: 100px;
    }
    #div2 {
    	left: 300px;
    }
    
    </style>
    </head>
    <body>
    
    <div id="div1" class="divClass" onClick="getColor(id)">TEXT1</div>
    <div id="div2" class="divClass" onClick="getColor(id)" style="color: #0000ff">TEXT2</div>
    
    </body>
    </html>

  2. #2
    Join Date
    Mar 2011
    Posts
    1,109
    The 'style' property only looks at the 'style' attribute of the element. You could try getComputedStyle(), but be aware that it may return an RGB triplet (ie. 'rgb(00, 00, 255)') - I haven't used it for color values.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    the function should be

    Code:
    function getColor(el){
    alert(el.id + " text color is " + el.style.color);
    }
    and the markup

    Code:
    <div id="div1" class="divClass" onClick="getColor(this)">TEXT1</div>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  4. #4
    Join Date
    Mar 2011
    Posts
    1,109
    That's better and cleaner, but it still won't do the trick there, Raskolnikov - not that I ever had the patience to read Dostoyevksy ;-)

    The 'style' property only contains the inline CSS style settings. You could have all sorts of rules in the stylesheet for that element and the style property in this code will still report null, no values.
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,450
    Hi there TedN,

    IE and Opera give colors in hex, others give it in rgb.

    The following code will give you the hex color in all...
    Code:
    
    <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="utf-8">
    
    <title>Text Color</title>
    
    <script>
    (function() {
       'use strict';
    
       var hex;
       var textColor;
       var compStyle;
       var dvs=document.getElementsByTagName('div');
    
    function init(){
    for(var c=0;c<dvs.length;c++){
    if(dvs[c].className.match('divClass')) {
    if(dvs[c].currentStyle) {
       textColor=dvs[c].currentStyle.color;
     }
    else {
       compStyle=getComputedStyle(dvs[c],'');
       textColor=compStyle.getPropertyValue('color');
     }
       colorToHex(textColor);
    
    dvs[c].onclick=function() {
       alert(this.id+' text color is '+hex);
        }
       }
      }
     }
    
    function colorToHex(rgb) {
    if(rgb.substr(0,1)=='#') {
       hex=rgb;
     }
    else {
       rgb=rgb.toString();
       rgb=rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
       hex='#'+
       ('0'+parseInt(rgb[1],10).toString(16)).slice(-2)+
       ('0'+parseInt(rgb[2],10).toString(16)).slice(-2)+
       ('0'+parseInt(rgb[3],10).toString(16)).slice(-2);
     }
       return;
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    })();
    </script>
    
    <style>
    .divClass {
        height:50px;
        top:100px;
        width:100px;
        font-family:arial,sans-serif;
        font-size:24pt;
        font-weight:bold;
        text-align:center;
        background-color:#fff;
        color:#00f;
        position:absolute;
     }
    #div1 {
        left:100px;
     }
    #div2 {
        left:300px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="div1" class="divClass">TEXT1</div>
    <div id="div2" class="divClass">TEXT2</div>
    
    </body>
    </html>
    coothead

  6. #6
    Join Date
    Feb 2013
    Posts
    1
    I want to download safari but i can't go on www.safari.com can anyone give me a link of safari?

  7. #7
    Join Date
    Jun 2005
    Posts
    20
    Thanks for all your replies. I should have come here first rather than spend a day scouring the internet. It seems that "getComputedStyle" is the key to this. I've modified my test code to include this. The result is only in rgb, which I can live with, I have no particular preference. Once again, thanks for your help.

    Code:
    <!DOCTYPE html>
    <html>
    <head><title>Text Color</title>
    
    <script language="javascript">
    
    function getColor(el){
    	var d = document.getElementById(el);
    	var col = window.getComputedStyle(d, null).color;
    	
    	if (window.getComputedStyle) {
    		col = window.getComputedStyle(d, null).color;
    	}
    	else {
    		col = document.getElementById(el).currentStyle.color;
    	}
    	
    	alert(col);
    }
    </script>
    
    <style type="text/css">
    
    .divClass {
    	height: 50px;
    	top: 100px;
    	width: 100px;
    	font-family: "Arial";
    	font-size: 24pt;
    	font-weight: bold;
    	text-align: center;
    	background-color: #ffffff;
    	position: absolute;
    }
    #div1 {
    	left: 100px;
    	color: #0000ff;
    }
    #div2 {
    	left: 300px;
    	color: #ff00ff;
    }
    
    </style>
    </head>
    <body>
    
    <div id="div1" class="divClass" onClick="getColor(id)">TEXT1</div>
    <div id="div2" class="divClass" onClick="getColor(id)" >TEXT2</div>
    
    </body>
    </html>

  8. #8
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,450
    Hi there TedN,

    the code that I gave you does give the color in hex.

    Have you not tried it?

    It also removes the event handlers from the HTML which is good practice.

    coothead

  9. #9
    Join Date
    Jun 2005
    Posts
    20
    Hi coothead. I read and appreciated your reply. I had no real reason to use Hex, I've used both RGB and Hex in the past. My main problem here was getting my code to work on Safari. I will however be saving your code snippet in my "treasure chest" for possible future reference.

    Thanks again.

  10. #10
    Join Date
    Jun 2005
    Posts
    20
    BradfordBruce,
    Google Safari download

  11. #11
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,450
    Hi there TedN,

    if you want to save the code, then use this example, which allows
    for separate colors set in the id rather than one set in the class...
    Code:
    
    <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="utf-8">
    
    <title>Text Color</title>
    
    <script>
    (function() {
       'use strict';
    
       var hex;
       var textColor;
       var compStyle;
       var dvs=document.getElementsByTagName('div');
    
    function init(){
    for(var c=0;c<dvs.length;c++){
    if(dvs[c].className.match('divClass')) {
    
    dvs[c].onclick=function() {
    if(this.currentStyle) {
       textColor=this.currentStyle.color;
     }
    else{
       compStyle=getComputedStyle(this,'');
       textColor=compStyle.getPropertyValue('color');
     }
       colorToHex(textColor);
       alert(this.id+' text color is '+hex);
        }
       }
      }
     }
    
    function colorToHex(rgb) {
    if(rgb.substr(0,1)=='#') {
       hex=rgb;
     }
    else {
       rgb=rgb.toString();
       rgb=rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
       return hex='#'+
       ('0'+parseInt(rgb[1],10).toString(16)).slice(-2)+
       ('0'+parseInt(rgb[2],10).toString(16)).slice(-2)+
       ('0'+parseInt(rgb[3],10).toString(16)).slice(-2);
      }
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    })();
    </script>
    
    <style>
    .divClass {
        float:left;
        width:100px;
        margin:100px 10px;
        font-family:arial,sans-serif;
        font-size:24px;
        font-weight:bold;
        text-align:center;
     }
    #div1 {
        color:#0000ff;
     }
    #div2 {
        color:#f00;
     }
    </style>
    
    </head>
    <body>
    
    <div id="div1" class="divClass">TEXT1</div>
    <div id="div2" class="divClass">TEXT2</div>
    
    </body>
    </html>
    coothead

  12. #12
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    2a56b917.jpg Raskolnikoff in action lol this one could be a good avatar
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles