0

我有一个对象生成器。它工作正常。

'use strict';
function Div(isim) {
    this.loc = document.getElementById(isim);
    var style = window.getComputedStyle(this.loc);
    this.width = style.getPropertyValue('width');
    this.height = style.getPropertyValue('height');
    this.left = style.getPropertyValue('left');
    this.top = style.getPropertyValue('top');
}

但后来我正在更新元素的属性

var d = new Div("d");
d.loc.style.left = getRandomInt(0, window.innerWidth - 50) + "px";
d.loc.style.top = getRandomInt(0, window.innerHeight - 50) + "px";
console.log(d.left); //gives auto
console.log(d.width); //gives the right value

并且console.log(d.left)是错误的。我已经找到了修复它的方法，但它有点脏，我认为：

var d = new Div("d");
d.loc.style.left = getRandomInt(0, window.innerWidth - 50) + "px";
d.loc.style.top = getRandomInt(0, window.innerHeight - 50) + "px";
d = new Div("d");
console.log(d.left); //gives the right value
console.log(d.width); //gives the right value

还有另一种方式（我更喜欢一条线）？不幸的是，我不擅长英语，如果有问题，标题有错误，请编辑它们。

4

2 回答 2

1

在您的函数中将 this.left 更改为

this.left = function () {
    return window.getComputedStyle(this.loc).getPropertyValue('left');
}

然后在您的通话中将其更改为

console.log(d.left());
于 2015-05-09T08:49:18.850 回答
1

该值已缓存，因此您需要重新计算。

function Div(isim) {
    this.loc = document.getElementById(isim);
    var style = window.getComputedStyle(this.loc);
    this.width = style.getPropertyValue('width');
    this.height = style.getPropertyValue('height');
    this.left = style.getPropertyValue('left');
    this.top = style.getPropertyValue('top');
    this.getStyle = function (prop) {
        return style.getPropertyValue(prop);
    }.bind(this);
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var d = new Div("d");
d.loc.style.left = getRandomInt(0, window.innerWidth - 50) + "px";
d.loc.style.top = getRandomInt(0, window.innerHeight - 50) + "px";
console.log(d.getStyle('left'));
console.log(d.getStyle('width'));

http://jsfiddle.net/s72vg53z/1/

于 2015-05-09T08:59:00.317 回答