文档章节

Javascript之伪类的应用、offset偏移量

 沉非
发布于 2017/07/23 00:41
字数 505
阅读 5
收藏 0

before和after:在一个元素标签的前面或者后面,创建一个新的虚拟的标签,我们可以给这个虚拟的标签增加样式,也可以增加内容等;JS是获取不到伪类的标签,但是能够通过getComputedStyle这个方法来获取其元素标签样式值;

null和undefined的区别:

null:代表没有,代表值没有,但是属性存在

undefined:代表没有,但是连属性都不存在

1、parentNode:父亲节点 HTML结构层级关系中的上一级元素

2、offsetParent:父级参照物  在同一个平面中,最外层的元素是里面所有元素的父级参照物,和HTML的层级结构没有必然的联系

    //-> 一般来说一个页面中所有元素的父级参照物都是body

    //-> body的父级参照物是null

    //-> 想要改变父级参照物需要通过position定位来进行改变;以下定位可修改父级参照物

    position: absolute;

    position: relative;

    position: fixed;

3、offsetTop/offsetLeft:当前元素(外边框)距离父级参照物(内边框)的偏移距离

    // ->offset:等同于jQuery中的offset方法,实现获取页面中任意一个元素,距离body的偏移(包含左偏移和上偏移),不管当前元素的父级参照物是谁

    function offset(current){

        var left = null,top = null,par = current.offsetParent;

        left += current.offsetLeft;

        top += current.offsetTop;

        //->只要没有找到body,我们就把父级参照物的边框和偏移也进行累加

        while(par) {

            if(navigator.userAgent.indexOf("MSIE 8.0") === -1){  //不是标准的IE8浏览器,我们才进行累加父级参照物的边框

                //累加父级参照物的边框

                left += par.clientLeft;

                top += par.clientTop;

            }

            // -> 累加父级参照物本身的偏移

            left += par.offsetLeft;

            top += par.offsetTop;

            par += par.offsetParent;

        }

        return {left: left, top: top}

    }

 

在标准的IE8中,我们使用的offsetLeft/offsetTop其实是已经把父级参照物的边框已经算在内了,所以我们不需要我们再单独的加边框了

 

© 著作权归作者所有

粉丝 1
博文 32
码字总数 24934
作品 0
海淀
程序员
私信 提问
JavaScript 如何工作: 深入 V8 引擎 + 编写优质代码的 5 个技巧

译者: 波比小金刚 翻译水平有限,如有错误请指出。 原文: blog.sessionstack.com/how-javascr… ps: 最近开始整理所有的优质文章翻译集,当然如果你有好的文章请提 issue,我会找时间翻译出来...

波比小金刚
2018/12/10
0
0
V8引擎优化机制之隐藏类和内联缓存

我们知道Javascript作为一种动态语言,性能方面与c#,Java之类的静态语言相比存在着一定的差距。而随着Web技术的发展,对Javascript的执行效率提出越来越高的要求。为了追求更好的性能,V8引擎...

scq000
01/10
0
0
JQuery中操作Css样式的方法

获取和设置样式 追加样式 移除样式 切换类名 判断是否含有某项样式 获取css样式中的样式 设置单个样式 设置多个样式 offset()方法 它的作用是获取元素在当前视窗的相对偏移,其中返回对象包含...

Bery
2017/10/20
18
0
解读 JavaScript 之 V8 引擎及优化代码的 5 个技巧

几个星期前,我们开始了一系列旨在深入研究 JavaScript 及其实际工作方式的系列文章:我们认为通过了解 JavaScript 的构建块以及它们如何一起协作的,你将能够编写更好的代码和应用程序。 本...

oschina
2017/12/13
4.4K
5
【JSConf EU 2018】JavaScript引擎: 精粹部分

JSConf EU 2018圆满结束, 谷歌V8的开发者Mathias Bynens以及Benedikt Meurer一起发表了《JavaScript Engines: The Good Parts™》演讲,本文将带领大家回顾一下演讲上所提到的重点。 演讲第一...

想成为工匠的码农
2018/06/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
今天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
今天
6
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
今天
4
0
Python机器学习之数据探索可视化库yellowbrick

背景介绍 从学sklearn时,除了算法的坎要过,还得学习matplotlib可视化,对我的实践应用而言,可视化更重要一些,然而matplotlib的易用性和美观性确实不敢恭维。陆续使用过plotly、seaborn,...

yeayee
今天
8
0
重读《学习JavaScript数据结构与算法-第三版》- 第5章 队列

定场诗 马瘦毛长蹄子肥,儿子偷爹不算贼,瞎大爷娶个瞎大奶奶,老两口过了多半辈,谁也没看见谁! 前言 本章为重读《学习JavaScript数据结构与算法-第三版》的系列文章,主要讲述队列数据结...

胡哥有话说
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部