今天同事找了一个悬浮广告的插件，但是一放入页面中就失效了，也没有报错，后来通过原文件对比，发现是加了<!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. mysql中AES_ENCRYPT、AES_DNCRYPT及CONVERT的用法

    这两天在弄公司的服务端项目的时候,发现mysql比较实用的3个函数,在这里给大家分享一下. 1.AES_ENCRYPT函数,这个函数的使用场景是对一些安全性要求比较高的数据使用AES加密,语法为: A ...

  2. centos7配置ip

    vi /etc/sysconfig/network-scripts/ifcfg-enp0s3 ONBOOT=yes 重启ip服务 systemctl restart network.service 开 ...

  3. linq中first() firstordefault() last() lastOrDefault() single() singleOrDeafult

    一.firstordefault() 和 first() class Program { static void Main(string[] args) { List<Emp> list ...

  4. jsp:usebean 常用注意事项

    bean就是一个Java类,一般来说写这个类应该注意以下几点: 1.必须有包名,不要使用裸类 2.类的第一个名字小写 3.尽量不要使用公共成员变量,使用私有的,通过set.get方法来操作类中的变量 ...

  5. ref与out之间的区别整理 摘自与望楼http://blog.csdn.net/xiaoning8201/article/details/6893154

    ref和out都是C#中的关键字,所实现的功能也差不多,都是指定一个参数按照引用传递. 对于编译后的程序而言,它们之间没有任何区别,也就是说它们只有语法区别. 总结起来,他们有如下语法区别: .ref ...

  6. mouse的各种事件

    IE测试对象为IE9,不全 mousemove(元素内部移动) 鼠标在元素内部移动时触发,只要鼠标移动,即使只是又移动了一个像素,也会触发,这就意味着短时间内会触发多次事件 支持情况: js onmo ...

  7. iOS生成一个32位的UUID

    - (NSString *)uuidString { CFUUIDRef uuid_ref = CFUUIDCreate(NULL); CFStringRef uuid_string_ref= CFU ...

  8. eclipse的调试方法的简单介绍

    声明:本文不是自己 作为编程人员,程序的调试是一项基本功.在不使用IDE的时候,程序的调试多数是通过日志或者输入语句(System.out.println)的方式.可以把程序运行的轨迹或者程序运行过程 ...

  9. gcc编译错误表

    conversion from %s to %s not supported by iconv”iconv 不支持从 %s 到 %s 的转换” iconv_open”iconv_open” no ic ...

  10. Win7下配置Django+Apache+mod_wsgi+Sqlite

    搭建环境: win7 64位 Django 1.8.5 Apache2.4.17 mod_wsgi_ap24py27.so Python2.7.9 1 安装Apache 下载Apache Haus版, ...