添加后造成JS写的定位失效

时间:2022-07-25 15:27:11

今天同事找了一个悬浮广告的插件,但是一放入页面中就失效了,也没有报错,后来通过原文件对比,发现是加了<!doctype html>。

这样子定位并不起效果:

document.getElementById("rockImg").style.left=document.getElementById("rockImg").offsetTop;

后来在网上找了一下发现是声明文档的解析类型(document.compatMode)的原因:

document.compatMode:
BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。

当没有<!doctype html>时浏览器会使用BackCompat,在这个模式下问题较多,文档声明也不严格,像上述代码出来的值加不加代码都不要紧,均可运行。

但是加了<!doctype html>后浏览器就会使用CSS1Compat,在这个模式下浏览器会使用W3C标准来渲染页面,这样要求也会比较严格,像上述代码得出来的值只是数字,所以必须要添加单位才可以运行。

修改为:

document.getElementById("rockImg").style.left=document.getElementById("rockImg").offsetTop+'px';