How to get the width in my Div

JavaScript
1

Hi, how can i get the value of my div width with an id "zoomout’

i tried offsetwidth but nothing happened.



<!DOCTYPE html>

<html>

  <head>
    <meta charset="utf-8"/>
	
	<style type="text/css">
	  .rembull ul{
	    list-style: none;
	  }
	
	  ul img{
	    width: 80px;
	  }
	
	  #bodycontainer{
	    background: #555555;
		width: 100%;
		height: 100%;
		position: absolute;
		border: 1px solid blue;
		top: 0;
		left: 0;
		z-index: 10;
		opacity: 0.7;
	    display: none;
	  }
	
	
	  #zoomout{
	
	    background: yellow;
	    position: relative;
		left:  300px;
		bottom: 300px;
		width: 10em;
		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);
		
	  }
	
		
	
	  #pic{
	
	
	  }
	
	</style>
	
  </head>

   <body>

	    <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>
		   </ul>
		<div>

		<div id="bodycontainer">
			
			
	    </div>
		
			<div id="zoomout">
				
			</div>
	
	
	 <script>
	
		 var pic, items,zoom;
	     var bodycont;
		 pic = document.getElementById("pic");
		 items = pic.getElementsByTagName("li");
		 console.log(items);
	     console.log(document.getElementById("pic"));
		
	     var i=0;
		 var itemslen,you;
		
			
		
		pic.addEventListener("click",function(e){
			
			 if(e.target.tagName === "IMG")
			    {
				  bodycont =  document.getElementById("bodycontainer");
				  zoom  =  document.getElementById("zoomout");
				
				  bodycont.style.display="block";
				  zoom.style.display="block";
				
				  var wid = zoom.offsetwidth;
				  alert(wid);
				
				  var img = document.createElement("img");
				  img.src = e.target.src;
			      zoom.appendChild(img);
				
				}
		});
	
			
	

	 </script>
	
   </body>
</html>
2

Hi,

If you don’t mind using jQuery, you can use its width method, which gets the current computed width for the first element in the set of matched elements.
For example: $(“#zoomout”).width();

3

you cannot measure the offsetWidth of an element with a display of ‘none’(effectively removed from the page)

4

Oops, missed that entirely :blush:

5

But i want to try to code in javascript,can you help me on this how to do this in javascript?is this possible to do?

6

But how can do this in javascript,how can i get the width value of my div?Thank you in advance.

7

As vwphillips says, it is rather tricky to measure the width of an element with a display of ‘none’.
However, tricky is not impossible.
Here’s a discussion of how to do this: http://stackoverflow.com/questions/1472303/jquery-get-width-of-element-when-not-visible-display-none

I know that you don’t want to use jQuery, but maybe the ideas put forward here (adding a couple of CSS properties to make the browser think the element is visible, when it isn’t) can be translated into plain JavaScript.

8 
<!DOCTYPE html>

<html>

  <head>
    <meta charset="utf-8"/>

	<style type="text/css">
	  .rembull ul{
	    list-style: none;
	  }

	  ul img{
	    width: 80px;
	  }

	  #bodycontainer{
	    background: #555555;
		width: 100%;
		height: 100%;
		position: absolute;
		border: 1px solid blue;
		top: 0;
		left: 0;
		z-index: 10;
		opacity: 0.7;
	    display: none;
	  }


	  #zoomout{

	    background: yellow;
	    position: relative;
		left:  300px;
		bottom: 300px;
		width: 10em;
		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);

	  }



	  #pic{


	  }

	</style>

  </head>

   <body>

	    <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>
		   </ul>
		<div>

		<div id="bodycontainer">


	    </div>

			<div id="zoomout">

			</div>


	 <script>

function style(o,p){
  if (o.currentStyle){
   return o.currentStyle[p.replace(/-/g,'')];
  }
  return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
 }

 var obj=document.getElementById('zoomout');
 var d=style(obj,'display');
 obj.style.display='block';
 var w=obj.offsetWidth;
 obj.style.display=d;
 alert(w);


	 </script>

   </body>
</html>
9

Hi, vwphillips

 Can i ask some favor?can you please put some comments in the code so that it can help me easily to understand.and also for the other readers this will help them also.Thank you in advance.more power to you always.
10

Hi there,
As Vic didn’t reply yet, I’ll have a go at this.
I always find commenting my code well tricky, so if anyone has any suggestions for improvements, or if anything I wrote is plain wrong, please chime in.
Other than that, I hope this helps you:

// This function accepts two arguments: 'o' an HTML element object and 'p' a string which represents a css property.
// It returns the value of the css property 'p' for element 'o'
// E.g. if 'o' is 'div#zoomout' and 'p' is 'display', it will return the current value of the display property for div#zoomout
//
function style(o,p){
  if (o.currentStyle){
    return o.currentStyle[p.replace(/-/g,'')];
  }
  return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
}

// Get a reference to the element whose width we want to know
var obj=document.getElementById('zoomout');

// Call the function 'style' to get a value for the current display property of div#zoomout.
var d=style(obj,'display');

// Set div#zoomout's display to block
obj.style.display='block';

// Now we can get its width
var w=obj.offsetWidth;

// Set div#zoomout's display back to whatever it was originally
obj.style.display=d;
alert(w);
11

I’ll try to.

// This function accepts two arguments: 'o' an HTML element object and 'p' a string which represents a css property.

Using a variable of ‘o’ for an element can be confusing, and likewise ‘p’ for the css property. You don’t need that comment when you use appropriately standard function variables that inform the person reading the code from the name of the variables themself.

For example:


function style(el, prop) {


// It returns the value of the css property 'p' for element 'o'

Giving the function a more expressive name helps to remove the need for the above comment, such as getComputedStyle, or getCssValue


function getCssValue(el, prop) {


// E.g. if 'o' is 'div#zoomout' and 'p' is 'display', it will return the current value of the display property for div#zoomout

Using a named variable to contain the value removed the need for the above comment


var cssValue;

if (...) {
    cssValue = ...;
} else {
    cssValue = ...;
}

return cssValue;


// Get a reference to the element whose width we want to know

The above comment repeats in English what the code is already saying.

Do not write these sorts of comments. They are a waste and don’t help to serve any explanatory purpose.

// add 1 to i
i++;

How could the code be improved so that the code is easily understandable, and comments don’t end up serving a useless purpose?


// The following code is an example of how to get the width of an element when the element may be potentially hidden.

function getCssValue(el, prop) {
    var value = '';

    if (el.currentStyle) {
        value = el.currentStyle[prop.replace(/-/g, '')];
    } else {
        value = document.defaultView.getComputedStyle(el, null).getPropertyValue(prop.toLowerCase());
    }

    return value;
}

function getElementWidth(el) {
    // The width of an element cannot be obtained from a potentially hidden element.
    // We can get the width though by setting its display to block, after which we return its display back to what it initially had.

    var originalDisplay = getCssValue(el, 'display'),
        width;

    el.style.display = 'block';
    width = el.offsetWidth;
    el.style.display = originalDisplay;

    return width;
}

var el = document.getElementById('zoomout'),
    width = getElementWidth(el);

alert(width);

Try to use comments to explain why things are happening. The use of good variable names go a long way to preventing the need for other wasteful comments. Commonly comments are used to explain about bad code. In such cases, fixing the code to remove the need for such comments and the programmers attention is no longer wasted by such comments, so that he can focus on the code instead.

12

Hi Pullo, Thank you for commenting the codes…it helps me more power to you.

13

Hi paul_wilkins, thank you also for this explanation…it helps me too…

14

Hi paul_wilkins, I forgot to ask on this

value = el.currentStyle[prop.replace(/-/g, ‘’)];

what does the prop.replace(/-/g, ‘’) do?

Thank you in advance.

15

It replaces hyphens with nothing, which results in removing the hyphens.

16

Thank you Paul.
As ever, I learned a lot!

17

Okay,…is this a kind of regex?

18

A regular expression is used to get a text from a strin of text, based on different matching criteria.
The replace method let’s you indicate what you want to be replaced using text or a regex.

So it could have instead been done as:


... = prop.replace('-' , '', 'g');

It seems though that it’s easier to understand what the regular expression version is intending to do, than when not using it.