javascript - 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 的问题是，当我 checkin 开发人员工具时，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

解决了!

问题来自 this.centerX 和 this.centerY，它们是使用 document.width 和 document.height 计算的，它们在 safari 中有效，但在 firefox 或 chrome 中无效，所以在这两个中它们返回 NaN...我更改了它们对于 window.innerWidth 和 window.innerHeight 并且在任何地方都能完美工作...谢谢!