Javascript image width and height undefined values -

I try to get width and height with previewframe and I set the value to 100%, but when I will always try to alert it. Undefined value here is my html file:

And here's my CSS:

  html, body {margin: 0; Background: #ccc; } #previewWrapper {margin: 44px 0px; Width: 100%; Height: Calc (100% - 88 px); } #previewFrame {width: 100%; Height: 100%; Margin top: 44px; Background: # 000; } #previewFrame img {max-width: 100%; Maximum height: 100%; }  

And this is my JS:

  function imageInfo () {var pFrame = document.getElementById ("previewframe"); PFrame.setAttribute ('style', "width: 100%; height: calc (100% - 88px);"); Var frames = pFrame.width; Var frames = pFrame.height; Var pImage = document.getElementById ("Preview Image"); Var imageWidth = pImage.width; Var imageHeigh = pImage.height; Warning ('frame size is' + framewidth + 'px x' + framhae + 'px'); } Window.onload = imageInfo;  

First of setAttribute is a method, not a property Object with style Then it should be

  pFrame.setAttribute ('style', 'width: 100%; height: calc (100% - 88px); ");  

< P> The other problem is that you need to use the getComputedStyle method to read browser-css properties:

  var PFrameStyle = window.getComputedStyle (pFrame , Null); Var framewidth = pFrameStyle.width; var is frames = pFrameStyle.height;  

Demo: