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()
.
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);
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));
Post a Comment for "Get The Border Color Of A Dynamic Image Then Print It"