Getting the actual width of IMG

I need some help on how can i get the actual width of my Image when everytime i click.

supposed the actual width of my image is 150x150

i want that when i am going to click in each image in the list ,it will alert the widh of the image which is 150.can you help me please on this.Thank you in advance.

<!DOCTYPE html>


    <meta charset="utf-8"/>
	<style type="text/css">
	  .rembull ul{
	    list-style: none;
	  ul img{
	    width: 80px;
	    background: #555555;
		width: 100%;
		height: 100%;
		position: absolute;
		border: 1px solid blue;
		top: 0;
		left: 0;
		z-index: 10;
		opacity: 0.7;
	    display: none;
	    background: yellow;
	    position: relative;
		left:  300px;
		bottom: 300px;
		width: 150px;
		height: 250px;
		display: none;
		z-index: 100;
		-webkit-box-shadow: -1px 10px 5px rgba(50, 50, 50, 0.75);
		-moz-box-shadow:    -1px 10px 5px rgba(50, 50, 50, 0.75);
		box-shadow:         -1px 10px 5px rgba(50, 50, 50, 0.75);


	    <div class="rembull">
		   <ul id="pic">
			   <li><img src="image/pic-1.jpg"/></li>
			   <li><img src="image/pic-2.jpg"/></li>
			   <li><img src="image/pic-3.jpg"/></li>
			   <li><img src="image/pic-4.jpg"/></li>

		<div id="bodycontainer">
			<div id="zoomout">
		 var pic, items,zoom;
	     var bodycont;
		 pic = document.getElementById("pic");
		 items = pic.getElementsByTagName("li");
	     var i=0;
		 var itemslen,you;
			 if( === "IMG")
				  bodycont =  document.getElementById("bodycontainer");
				  zoom  =  document.getElementById("zoomout");
				  var img = document.createElement("img");
				  img.src =;
                                  var wid = img.src.offsetwidth;



That seems to be pretty easy to achieve.

var images = document.querySelectorAll('#pic img'),
for (i = 0; i < images.length; i += 1) {
    images[i].onclick = function () {

Hi paul_wilkins, thank you so much for this…it solve my problem…more power to you always…

An improvement from here would be to not assign multiple events on the page, but to use just the one event to manage things.

document.querySelector('#pic').onclick(function (evt) {
    evt = evt || window.event;
    var targ = || evt.srcElement;
    if (targ.nodeName === 'img') {

don’t forget to replace the debugging alert call with real code once you get it working - you don’t want your visitors selecting the option to turn off JavaScript for the page that alert offers in some browsers

Hi paul_wilkins, correct me if i am wrong is this how we read

evt = evt || window.event;

evt = evt or window.event; ?


is an OR?

Thank you felgall.