javascript针对DOM的应用分析（五）

首页

web前端

js教程

javascript针对DOM的应用分析（五）_DOM

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:54 PM

dom

其实这个应该不列入JS教程的范畴。应为FF，IE6以上浏览器都支持fixed这个固定属性。唯独IE6不支持。所以我为了可恶的IE6。我这里就出一篇教程吧。而且这种效果也可以锻炼同学们的计算能力。以后很多效果都需要你的计算能力。哈哈
固定居中。或者固定在任何地方思想几乎是一样的。只你要算法清楚了。效果写起来就轻而易举了。先贴代码

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
这两句是判断浏览器。这是Aajx里的方法。也很好理解。我在这里就不多说了。大家有兴趣的可以去网上找找了解一下判断各种浏览器。

var t= (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop;
var l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft;
这两句是重点。我要仔细说下：
document.documentElement.clientHeight这个是获取当前浏览器窗口的高度。
document.getElementById("gd").offsetHeight这是获取我们dom元素的实际高度。
document.documentElement.scrollTop这是获取滚动条滚动的高度。

document.documentElement.clientHeight/2整个浏览器高度的一半减去document.getElementById("gd").offsetHeight/2我们dom元素高度的一半。就是我们这个DOM元素要居中所需要距离当前浏览器顶部的top距离。但是这只是个死的高度。因为浏览器的内容不可能正好就是小于等于浏览器当前窗口的高度。内容特别高的时候会出现滚动条。好在我们有document.documentElement.scrollTop也就是我们滚动条滚动的高度。把他加上就是即时dom元素需要居中时候距离当前浏览器顶部的top距离，当然下面那句的算法和这个是一样的，我就不多说了，也让大家自己理解一下，这样印象会深刻一点。

不知道我这样说大家理解没有。这个应该用个图文说明的。不过我觉得我说的应该挺清楚了。大家如果还有点模糊。在纸上画画也就能明白了。
这个距离清楚了的话。现在我们只需要做最后一件事了。就是让滚动条滚动的时候。即时的把这个滚动的高度给加进去。然后把即时的这个t和l值设置到dom的top和left属性中去。这样就能给用户造成个假象。以为这个是固定在那里的。

复制代码代码如下:

 
if(isIE6){ 
setInterval(function(){ 
t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop; 
l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft; 
document.getElementById("gd").style.position = "absolute" 
document.getElementById("gd").style.top = t + "px"; 
document.getElementById("gd").style.left = l + "px"; 
},1) 

这段就是这个作用。if(isIE6)就是当isIE6这个为真时。也就是当是IE6的浏览器的时候。setInterval(...,1)这个是设置个时钟让在IE6的浏览器下每隔1微秒执行一下语句。也就是不断的在更新t和l的值。然后不断的付给DOM元素的top和left属性，1微秒非常快。用户拉滚动条的速度不可能只需要1微秒的时间。所以用户也就不可能看出来什么。以为那个就是固定在那里的。当然你也可以设置一个滚动事件windon.onscroll。也可以。但是我觉得没这种好。大家有兴趣的也可以研究一下（大家别闲我啰嗦，我觉得自己多研究一下东西，比我教大家一大堆东西都有用）。

当然如果不是IE6的浏览器都支持fixed属性。就执行这些语句了。
document.getElementById("gd").style.position = "fixed"//给dom元素加一个fixed属性
document.getElementById("gd").style.top = t + "px";//初始化时给dom元素设置一个居中的t值。
document.getElementById("gd").style.left = l + "px";//初始化时给dom元素设置一个居中的l值

好了。这篇就到这里了。这里只是居中。还有什么固定底部拉，固定居左拉等等。道理都是一样的。只是计算top和left不一样而已。大家没事可以自己研究一下。还有setInterval和setTimeout这两个方法。以后出教程会用到很多

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Vue3获取DOM节点的方式有哪些May 11, 2023 pm 04:55 PM

1.原生js获取DOM节点：document.querySelector(选择器)document.getElementById(id选择器)document.getElementsByClassName(class选择器)....2.vue2中获取当前组件的实例对象：因为每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素或组件的引用。所以在默认情况下，组件的$refs指向一个空对象。可以先在组件上加上ref="名字"，然后通过this.$refs.

PHP中的DOM操作指南May 21, 2023 pm 04:01 PM

在网页开发中，DOM（DocumentObjectModel）是一个非常重要的概念。它可以让开发者轻松地对一个网页的HTML或XML文档进行修改和操作，比如添加、删除、修改元素等。而PHP中内置的DOM操作库也为开发者提供了丰富的功能，本文将介绍PHP中的DOM操作指南，希望可以帮助到大家。DOM的基本概念DOM是一个跨平台、独立于语言的API，它可以将

vue3中ref绑定dom或组件失败的原因是什么及怎么解决May 12, 2023 pm 01:28 PM

vue3ref绑定dom或者组件失败原因分析场景描述在vue3中经常用到使用ref绑定组件或者dom元素的情况，很多时候，明明使用ref绑定了相关组件，但是经常ref绑定失败的情况。ref绑定失败情况举例ref绑定失败的绝大多数情况是，在ref和组件绑定的时候，该组件还未渲染，所以绑定失败。或者组件刚开始未渲染，ref未绑定，当组件开始渲染，ref也开始绑定，但是ref和组件并未绑定完成，这个时候使用组件相关的方法就会出现问题。ref绑定的组件使用了v-if,或者他的父组件使用了v-if导致页面

vue dom是什么意思啊Dec 20, 2022 pm 08:41 PM

dom是一种文档对象模型，同时也是用于html编程的接口，通过dom来操作页面中的元素。DOM是HTML文档的内存中对象表示，它提供了使用JavaScript与网页交互的方式。DOM是节点的层次结构（或树），其中document节点作为根。

dom和bom对象有哪些Nov 13, 2023 am 10:52 AM

dom和bom对象有：1、“document”、“element”、“Node”、“Event”和“Window”等5种DOM对象；2、“window”、“navigator”、“location”、“history”和“screen”等5种BOM对象。

bom和dom有什么区别Nov 13, 2023 pm 03:23 PM

bom和dom在作用和功能、与JavaScript的关系、相互依赖性、不同浏览器的兼容性和安全性考虑等方面都有区别。详细介绍：1、作用和功能，BOM的主要作用是操作浏览器窗口，它提供了浏览器窗口的直接访问和控制，而DOM的主要作用则是将网页文档转换为一个对象树，允许开发者通过这个对象树来获取和修改网页的元素和内容；2、与JavaScript的关系等等。

dom内置对象有哪些Dec 19, 2023 pm 03:45 PM

dom内置对象有：1、document；2、window；3、navigator；4、location；5、history；6、screen；7、document.documentElement；8、document.body；9、document.head；10、document.title；11、document.cookie。