DOCTYPE html PUBLIC 让人吐血的问题

2024-01-15 02:18

本文主要是介绍DOCTYPE html PUBLIC 让人吐血的问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

使用了DOCTYPE html PUBLIC之后有些东西改变了~~害我查找了好久的错误~~追踪的好累啊~~

在javascript里面调用一些属性的名称发生了改变 我说怎么得不到document.body.scrollTop的值
以后js脚本取document值时候有问题估计就是这里弄出来的~~

很明显 使用了DOCTYPE html PUBLIC脚本之后document.body.scrollTop必须用document.documentElement.scrollTop来调用~document.documentElement.scrollLeft也是~
诸如此类都要改

在定义了DOCTYPE之后,使用document.documentElement.scrollLeft代替document.body.scrollLeft。同理使用document.documentElement.scrollTop代替document.body.scrollTop。

这样在有DOCTYPE的时候,图层也可以滚动了。

但是,在没有DOCTYPE的时候document.documentElement.scrollLeft也永远为零了,那么,能否有一个在有没有DOCTYPE定义都可以用的方案涅?嘿嘿。

那就可以这样写:

 

 

function scrollTop() //浏览器滚动条位置
{
var scrollTop;
if (document.documentElement && document.documentElement.scrollTop){
scrollTop = document.documentElement.scrollTop;
}else if (document.body){
scrollTop = document.body.scrollTop;
}else if (window.pageYOffset){
scrollTop = window.pageYOffset;
}
return scrollTop;
}

------------------------------------------------------------------------------------

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>定义了 HTML's DOCTYPE 的 Event 事件</title>
<script language="JavaScript" type="text/javascript">
function getvalue(e){
    if (!document.all){
        winW = window.innerWidth;
        winH = window.innerHeight;
        curX = e.pageX - window.pageXOffset;
        curY = e.pageY - window.pageYOffset;
        mouX = e.pageX;
        mouY = e.pageY;
        broX = window.pageXOffset;
        broY = window.pageYOffset;
    }else{
        winW = document.documentElement.clientWidth;
        winH = document.documentElement.clientHeight;
        curX = event.clientX;
        curY = event.clientY;
        mouX = event.clientX + document.documentElement.scrollLeft;
        mouY = event.clientY + document.documentElement.scrollTop;
        broX = document.documentElement.scrollLeft;
        broY = document.documentElement.scrollTop;
    }
    alert(" 窗口可见宽度(winW): "+winW+"/n/n 窗口可见高度(winH): "+winH+"/n/n 距窗口左边距离(curX): "+curX+"/n/n 距窗口顶部距离(curY): "+curY+"/n/n 距页面左边距离(mouX): "+mouX+"/n/n 距页面顶部距离(mouY): "+mouY+"/n/n 页面滚动的宽度(broX): "+broX+"/n/n 页面滚动的高度(broY): "+broY);
    return true;
}
document.οnclick=getvalue;
</script>
</head>

<body>
<img src="" width="400" height="500" alt="" />
</body>
</html>

 

这篇关于DOCTYPE html PUBLIC 让人吐血的问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/607328

相关文章

在 Spring Boot 中使用异步线程时的 HttpServletRequest 复用问题记录

《在SpringBoot中使用异步线程时的HttpServletRequest复用问题记录》文章讨论了在SpringBoot中使用异步线程时,由于HttpServletRequest复用导致... 目录一、问题描述:异步线程操作导致请求复用时 Cookie 解析失败1. 场景背景2. 问题根源二、问题详细分

解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题

《解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题》在Spring开发中,@Autowired注解常用于实现依赖注入,它可以应用于类的属性、构造器或setter方法上,然... 目录1. 为什么 @Autowired 在属性上被警告?1.1 隐式依赖注入1.2 IDE 的警告:

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

解决java.lang.NullPointerException问题(空指针异常)

《解决java.lang.NullPointerException问题(空指针异常)》本文详细介绍了Java中的NullPointerException异常及其常见原因,包括对象引用为null、数组元... 目录Java.lang.NullPointerException(空指针异常)NullPointer

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》:本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为:confirm 对话框会阻塞脚本的执行,直到用户作出选择。②

Android开发中gradle下载缓慢的问题级解决方法

《Android开发中gradle下载缓慢的问题级解决方法》本文介绍了解决Android开发中Gradle下载缓慢问题的几种方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、网络环境优化二、Gradle版本与配置优化三、其他优化措施针对android开发中Gradle下载缓慢的问

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网

HTML5中下拉框<select>标签的属性和样式详解

《HTML5中下拉框<select>标签的属性和样式详解》在HTML5中,下拉框(select标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中,下拉框(<select>标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中