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


今天同事找了一個懸浮廣告的插件,但是一放入頁面中就失效了,也沒有報錯,后來通過原文件對比,發現是加了<!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';

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM