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

添加<!doctype html>后造成JS写的定位失效的更多相关文章

  1. <!DOCTYPE html PUBLIC 导致js代码不可用

    在有了这个 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  2. JS写小游戏(一):游戏框架

    前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...

  3. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  4. 原生 js 写分页

    欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...

  5. 用原生JS写移动动画案例及实际应用

    js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...

  6. js写插件教程

    <!doctype html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  8. JS写的二级导航栏(利用冒泡原理)

    今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏 这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参 ...

  9. 使用 Node.js 写一个代码生成器

    背景 第一次接触代码生成器用的是动软代码生成器,数据库设计好之后,一键生成后端 curd代码.之后也用过 CodeSmith , T4.目前市面上也有很多优秀的代码生成器,而且大部分都提供可视化界面操 ...

随机推荐

  1. NTP服务器时间同步

    CentOS 配置服务器NTP同步 1 查看是否安装 rpm -aq | grep ntp 2 安装 yum -y install ntp 3 配置 /etc/ntp.conf restrict 访问 ...

  2. EF中用Newtonsoft.Json引发的循环引用问题

    描述: 1.双向关系表a->b b->aList 2.在查询a引用b以后 3.用Newtonsoft.Json 去tojsonstring 4.一个只有6条数据的json串 出现了一屏幕字 ...

  3. jsp环境搭建(Windows)

    1.软件准备 JDK 最新版jdk-8u45-windows-x64.exe tomcat 最新版32-bit/64-bit Windows Service Installer Eclipse IDE ...

  4. 初识Jmeter(一)

    倒霉熊的推荐: 文本学习网址:http://m.open-open.com/m/doc/category/105 视频学习网址: 软件学习网:http://www.ask3.cn/index.html ...

  5. C语言版的16进制与字符串互转函数

    http://www.cnblogs.com/nio-nio/p/3309367.html /* // C prototype : void StrToHex(BYTE *pbDest, BYTE * ...

  6. getByClassName2016/4/21

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. HDU 2668 Daydream

    用一个队列来维护 每次加入一个字符,如果字符没有在队列里,那么直接入队,并且检查更新队列大小. 如果加入的字符在队列里了,那么要一直弹出队首,直到弹出的字符和当前要插入的一样. #include< ...

  8. L5,no wrong numbers

    expressions: up to now,到现在为止 a great many,数量很大 in a way,在某种意义上说   words: burn,vt燃烧,vi烧毁,n灼烧 obtain,v ...

  9. PHP 常识

    PHP常识 1.谈谈你对MVC的认识,介绍几种目前比较流行的框架 由Model(M),View(V),Cntroller(C) 组成的一种设计模式,Model 主要处理一些业务处理类,View是页面显 ...

  10. hdu_5085_Counting problem(莫队分块思想)

    题目连接:hdu_5085_Counting problem 题意:给你一个计算公式,然后给你一个区间,问这个区间内满足条件的数有多少个 题解:由于这个公式比较特殊,具有可加性,我们考虑讲一个数分为两 ...