Chrome和Firefox忽略了頂部和左側的Javascript樣式

Question

我正在使用Javascript的樣式，並嘗試在我想要的位置放置一些div。 這段代碼在Safari中非常有效（每個div放在左邊和頂部說的地方），但在Chrome和Firefox上不起作用。 那不是

    div = document.createElement('div');
    div.id = this.numberOfSystem + 'circle' + i;


    div.x = ((this.centerX) + ((this.lenghtMain/2 + this.lenghtSmall/2 + 50) * Math.sin( 2 * Math.PI / this.amount * i))) - (this.lenghtSmall / 2);  
    div.y = ((this.centerY) + ((this.lenghtMain/2 + this.lenghtSmall/2 + 50) * Math.cos( 2 * Math.PI / this.amount * i))) - (this.lenghtSmall / 2);

    div.style.position = "fixed";
    div.style.left = div.x + "px";
    div.style.top = div.y + "px";
    div.style.width = this.lenghtSmall;
    div.style.height = this.lenghtSmall;

Chrome和Firefox的問題是當我簽入開發人員工具style.top和style.left時未定義，因此所有元素都位於左上角。 從開發人員工具->元素我得到這個

<div id="0circle1" style="position: fixed; width: 250px; height: 250px; text-align: center; background-image: url(file:///Users/Imanol/Documents/Webs/Portfolio2/circulo200.png); background-size: 100%;"><div style="margin: 20%;">Curriculum</div></div>

上下左右都沒有...在Safari中，它工作完美，元素放置在原本應有的位置。 這就是我從Safari那里得到的東西。

<div id="0circle0" style="position: fixed; left: 340.0003905596077px; top: 360.04122042944215px; width: 250px; height: 250px; background-image: url(file:///Users/Imanol/Documents/Webs/Portfolio2/circulo200.png); background-size: 100%; text-align: center;"><div style="margin: 20%;">Studies<br><br><img width="100" height="100" src="pastel.jpg"></div></div>

我嘗試使用Math.round（），但仍然無法正常工作。

Answer 1

解決了！

問題來自使用document.width和document.height計算的this.centerX和this.centerY，它們在Safari中起作用，但在Firefox或chrome中不起作用，因此在這兩個中它們返回NaN ...我將它們更改為窗口。 innerWidth和window.innerHeight都可以在任何地方完美工作...謝謝！