Get The Border Color Of A Dynamic Image Then Print It

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 +------------+ |

Solution 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)"

Solution 2:

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')

Solution 3:

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.

Solution 4:

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)

functionto_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));