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，所以所有元素都显示在左上角。来自开发人员工具 - ＆gt;我得到这个元素

<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并且在任何地方工作都很完美......谢谢！

Chrome和Firefox会忽略顶部和左侧的Javascript样式

1 个答案: