Get the border color of a dynamic image then print it

Question

I have been wondering if such an action is possible to accomplish and which language would be required.

Let's assume I have a image with a border:1px solid #333

+------------+
|            |
|   image    | 
|   border   |
|   is       |
|   #333;    |
|            |
+------------+

Once the page is refreshed it automatically updates to another image where it is a different color. Now, is it possible to somehow identify the 1px of the image border(#333) and then print that color?

Answer 1

You don't need to use jQuery to do this.

Pure JS approach using getComputedStyle() and getPropertyValue().

jsFiddle example

el_style = window.getComputedStyle(document.getElementById('some_element'));
el_border_color = el_style.getPropertyValue('border-color');

alert(el_border_color); //"rgb(255,0,0)"

Answer 2

In jQuery, you could get the border color with:

var color = $('#img').css("border-color");

Return result in rgb (e.g. rgb(44,44,44))

$("#result").html(color);

Return result in hex (e.g. #ff0000)

function to_hex(color) {

    var chars = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);

    var red = parseInt(chars[2]);
    var green = parseInt(chars[3]);
    var blue = parseInt(chars[4]);

    var rgb = blue | (green << 8) | (red << 16);
    return chars[1] + '#' + rgb.toString(16);
};


$("#result").html(to_hex(color));

Answer 3

Use jQuery. Assuming the following HTML for the image:

<img id="myImage" src="foo.jpg" alt="foo" />

you can get the color of border with:

$('#myImage').css('border-color')

Answer 4

You can use jQuery to get the color of the border, and then write that to an HTML element.

var imgBorderColor = $('img').css('border-color');
$('#output').html(imgBorderColor);

Working Fiddle

This will output the color as an RGB. If you need hex, see this discussion.