添加<!doctype html>后造成JS写的定位失效

最新推荐文章于 2023-04-26 17:30:26 发布
最新推荐文章于 2023-04-26 17:30:26 发布
阅读量280 收藏 1
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/gxsyj/p/6023328.html
本文探讨了DOCTYPE声明如何影响浏览器的解析模式，并解释了在不同模式下JavaScript代码的行为差异。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

 

转载于:https://www.cnblogs.com/gxsyj/p/6023328.html

你写的 HTML 可能一直是错的！DOCTYPE 的秘密终于有人讲清了
Where there is a will, there is a way !
05-25 1206
本文深入解析了DOCTYPE的重要性，揭示了标准模式与怪异模式的关键差异，通过真实案例展示了DOCTYPE错误可能导致的严重后果，并提供了实用的最佳实践指南。
Python学习第五周总结：HTML的初探与爬虫的乐趣
悾格的心
08-22 837
Python学习第五周总结：HTML的初探与爬虫的乐趣 HTML简介 HTML（HaperText Markup Language）：超文本标记语言，是一种用于创建网页的标准标记语言。 HTML 不是一种编程语言，而是一种标记语言 Html后缀名： .html .htm 空白折叠：浏览器中有个空白折叠的功能，无论有多少换行符，空格符都会合成一个 解决方法： 在文字后面添加<br>标签，没有行距 在文字前后各加<p></p>标签，有行距 注： Html中标准是双引
<!DOCTYPE html PUBLIC 导致js代码不可用
weixin_34234829的博客
05-28 139
在有了这个 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">标记的时候，说明这里引用的JS以及...
关于js实现绝对定位的问题
weixin_34006468的博客
09-20 944
2019独角兽企业重金招聘Python工程师标准>>> ...
＜!DOCTYPE html＞报错Uncaught SyntaxError: Unexpected token ‘＜?
m0_62472302的博客
04-26 5432
是.js，那么浏览器就会按js代码来解析语法，当然报错啦！必须把文件扩展名改为htm或者html，比如 index.htm。，文件>>文件夹 >>选择文件在集成终端打开 >>node HelloWord.html。你这是html文档，不是js代码，而你的。
Django 加载静态资源及＜!DOCTYPE html＞标红解决办法
张某文_Lambda的博客
09-11 6895
解决pycharm社区版 在使用Django框架时，使用{% load static %}语句失败的问题，提出其他方法实现静态资源的引入。
HTML面试题
qq_40055200的博客
11-11 4417
1.DOCTYPE有什么作用？包标准模式和混杂模式如何区分？它们有什么意义？ 告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。标准模式（Standards mode）以浏览器支持最高标准运行。混杂模式中页面是一种比较宽松向后兼容的方式显示。 2.什么是浏览器内核？ 总结:浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎主要负责获取页面内容（HTML,CSS,JS,XML，图像）等然后进行解析来渲染网页。渲染引擎决定浏览器如何显示.
<!DOCTYPE html> <html> <head> <style> /* 设置 id 为 "myHeader" 的元素的样式 */ #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } /* 设置类名为 "city" 的所有元素的样式 */ .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body> <h1>Class 与 ID 的差异</h1> <p>一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：</p> <!-- 拥有唯一 id 的元素 --> <h1 id="myHeader">我的城市</h1> <h2 id="myHeader">我的s市</h1> <p id="myHeader">我的s市</p> <!-- 拥有相同类名的多个元素 --> <h2 class="city">上海</h2> <p>中国最大的经济城市。</p> <h2 class="city">深圳</h2> <p>中国最具创新力的城市。</p> <h2 class="city">北京</h2> <p>中国的首都。</p> </body> </html> 实际效果不符合一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用吧
04-23
<think>好的，我现在需要帮助用户理解HTML中ID的唯一性问题以及多个相同ID可能导致的问题。首先，我需要回忆一下HTML规范中对ID的规定。根据引用[1]和[4]，ID在HTML中应该是唯一的，每个页面中的元素ID不应该重复。...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="icon" href="./favicon.ico" /> <title>易捷自习室管理系统</title> <!-- Preload CSS --> <link href="./css/app.ebafda5f.css" rel="preload" as="style" /> <link href="./css/chunk-vendors.1f0a25b2.css" rel="preload" as="style" /> <!-- Preload JS --> <link href="./js/app.76a5eac2.js" rel="preload" as="script" /> <link href="./js/chunk-vendors.0dca90fd.js" rel="preload" as="script" /> <!-- Stylesheets --> <link href="./css/chunk-vendors.1f0a25b2.css" rel="stylesheet" /> <link href="./css/app.ebafda5f.css" rel="stylesheet" /> </head> <body> <noscript> <strong> We're sorry but mas-creator-admin doesn't work properly without JavaScript enabled. Please enable it to continue. </strong> </noscript> <div id="app"></div> <!-- Scripts --> <script src="./js/chunk-vendors.0dca90fd.js"></script> <script src="./js/app.76a5eac2.js"></script> </body> </html>这是我的首页面 我修改login.vue的时候页面还是之前的
03-23
- 在 `vue.config.js` 中添加合适的代理规则以处理跨域访问需求[^2]: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'https://www.bgdjx.com:8080', changeOrigin: true, ...
<template> <div class="top-container"> <!--左侧--> <div class="left"> <img src="../../assets/yizai.png" alt="Logo"/> </div> <!--右侧--> <div class="right"> <nav> <!--按钮样式--> <!--button class="nav-btn" @click="handleClick('home')">Home</button> <button class="nav-btn" @click="handleClick('Contact')">Contact</button>--> <button class="nav-btn" @click="goHome">Home</button> <button class="nav-btn" @click="goContact">Contact</button> <button class="nav-btn" @click="goProducts">Products</button> <!--img :src="imageSrc" alt="按钮点击图" style="width:100px; margin-top:10px;"--> <!--链接样式--> <button class="nav-btn" @click="goLogin">Login</button> <!--下拉列表样式--> <template> <el-dropdown> <span class="language"> Language<el-icon><arrow-down/></el-icon> </span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item command="a" disabled>English</el-dropdown-item> <el-dropdown-item command="b">Chinese</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </template> <!-- <select class="language-select"> <option disabled selected>Language</option> <option v-for="lang in languages":key="lang">{{ lang }}</option> </select> --> </nav> </div> </div></template>为什么language显示不出来
最新发布
08-09
<think>我们正在处理一个网页开发中的问题：language下拉框在网页中无法显示。我们需要系统地分析可能的原因并提供解决方案。 可能的原因包括但不限于： 1. HTML结构问题：检查下拉框的HTML代码是否正确，比如...
页面布局样式
chanzhiliao的博客
09-19 691
一、单列布局 电商网站常用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面布局</title> <style> .box{ width:800px; height: 600px;
为什么使用DOCTYPE HTML
12-08
你知道如果没有它，浏览器在渲染页面的时候会使用怪异模式；你知道各个浏览器在怪异模式下对各个元素渲染是有差异的。所以你会写像这样的doctype： 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 好在现在的各种web开发工具都足够强大，支持插入模板代码，因此你并不需要把这又长又臭的doctype一个个字母的敲出来。但是如果你受够了它，你也许可以尝试下面这个写法： 复制代码代码如
< doctype html> 语法错误,<!DOCTYPE html> - syntax error
weixin_31985599的博客
06-15 3073
why in the world I'm a getting a syntax error from ?PortfolioSyntax errorFile "/Volumes/postergren_projectDrive/Projekt/programmingSandbox/Udacity/Intro to HTML and CSS/startBlock/portfolio/toplist/in...
HTML <!DOCTYPE> 标签
魔侠的沙滩
05-07 744
HTML 标签 实例 文档的标题 文档的内容...... 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera           所有浏览器都支持 声明。 定义和用法 声明必须是 HTML
web 常见报错处理
一起来氪金
08-29 2769
1、iptables防火墙设置的问题 导致服务不可达，或者网络异常（案例：常见设置中，都是防护墙在input或者output规则中设置异常。导致请求访问异常，或者出口请求访问异常）。 2、在高并发场景下。 如若内核未调优，可能会导致服务器没办法接受大规模的tcp连接请求，导致对应异常（如丢包）。我们要核心查以下日志确认（确定是不是有内核报错）： /var/log/message 如下案例...
< doctype html> 语法错误,javascript - <!DOCTYPE HTML> unexpected token error - Stack Overflow
weixin_36165323的博客
06-15 1334
Im making an AngularJS+AngularFire+Firebase Application.My problem is same decribed in this post (check post)but solution there did not help me.My firebase json is set as follows{"hosting": {"public":...
页面中加入<!DOCTYPE HTML>后EasyUi报错
majian_1987的专栏
04-17 6366
本人在做项目时，遇到一个问题，不知道怎么处理： 有一个taglib.jsp做为子页面被include，但这个页面中如果添加了主页面的EasyUi中的JQuery就会报错， 如果去掉页面就可以正常显示，不知道为什么，报错内容如下： 后来，还遇到另一个问题，如果在IE9标准模式下，EasyUI的dataGrid显示的时候有问题，显示记录数为NaN，把easyui中的Demo里的html加上，
html乱码问题
Gehang的博客
05-07 1543
<!DOCTYPE html> <html lang="en"> <head> <!-- 作用:告诉浏览器所采用的编码字符集是什么，然后浏览器就会根据此字符集来解码,只是一个告诉浏览器的作用， 具体的内容字符集格式是根据当前编辑器来决定的 --> <meta charset="UTF-8"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值