Question

我尝试从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;

Answer 1

首先，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图像宽度和高度未定义的值

1 个答案: