Menu
Community /Pin to ProfileBookmark
@cootheadMay 25.2013 — #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...
[i]coothead[/i]@cootheadMay 25.2013 — #Hi there TedN,
the code that I gave you does give the color in [b]hex[/b]. ?
Have you not tried it? :eek:
It also removes the event handlers from the HTML which is good practice. ?
[i]coothead[/i]@cootheadMay 25.2013 — #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...
[i]coothead[/i]
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>
Sign in
to post a comment11 Comments(s) ↴
0
@cootheadMay 25.2013 — #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...
[color=navy]
<!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>[/color][i]coothead[/i]
0
@cootheadMay 25.2013 — #Hi there TedN,the code that I gave you does give the color in [b]hex[/b]. ?
Have you not tried it? :eek:
It also removes the event handlers from the HTML which is good practice. ?
[i]coothead[/i]
0
@cootheadMay 25.2013 — #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...
[color=navy]
<!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>[/color][i]coothead[/i]