我尝试从PreviewFrame获取宽度和高度，并且将值均设置为100％，但是当我尝试警告它时，始终获得未定义的值。这是我的html文件：
<html>
<head>
<link rel="stylesheet" href="frame.css">
</head>
<body>
<div id="previewWrapper">
<div id="previewFrame">
<img id="previewImage" src="http://i.forbesimg.com/media/lists/companies/google_416x416.jpg"> </img>
</div>
</div>
<script src="frame.js"></script>
</body>
这是我的CSS：
html, body{
margin:0;
background:#ccc;
}
#previewWrapper{
margin:44px 0px;
width:100%;
height:calc(100% - 88px);
}
#previewFrame{
width:100%;
height:100%;
margin-top:44px;
background:#000;
}
#previewFrame img{
max-width:100%;
max-height:100%;
}
这是我的js：
function imageInfo() {
var pFrame = document.getElementById("previewFrame");
pFrame.setAttribute('style', "width: 100%; height: calc(100% - 88px);");
var frameWidth = pFrame.width;
var frameHeigh = pFrame.height;
var pImage = document.getElementById("previewImage");
var imageWidth = pImage.width;
var imageHeigh = pImage.height;
alert('Frame size is '+frameWidth+'px x '+frameHeigh+'px');
}
window.onload = imageInfo;
最佳答案
首先，setAttribute是方法，而不是具有属性style的对象。所以应该
pFrame.setAttribute('style', "width: 100%; height: calc(100% - 88px);");
第二个问题是，为了读取浏览器计算的CSS属性，您需要使用
getComputedStyle方法：var pFrameStyle = window.getComputedStyle(pFrame, null);
var frameWidth = pFrameStyle.width;
var frameHeigh = pFrameStyle.height;
演示：http://jsfiddle.net/yxz4201q/2/
关于javascript - JavaScript图像的宽度和高度未定义的值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29086100/