ylbtech-JavaScript:让你彻底弄清offset 1.返回顶部 1. 很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道大家看到这张图的第一感觉如何,反正我的感觉就是“这次第,怎一个乱字了得”. 既然我认为上图太多太乱,那么我就把offset.scroll.client分开说,希望能让大家彻底弄清楚,今天只说offset. 一.关于o

看到教程上和一些博客上盒子模型的宽度 = content + padding + margin + border,应该是不包括margin的 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>css盒子模型的宽度</title> <style type="text/css"> *{ margin:0; padd

/** * 对JSON对象转换为字符串. * @param {json对象} json * @return {json字符串} */ function jsonObj2Str(json) { var str = "{"; for (prop in json) { str += prop + ":" + json[prop] + ","; } str = str.substr(0, str.length - 1); str += "}&q

本文介绍vue-cli脚手架build目录中check-versions.js的配置 本文件是用来检测node和npm版本的 直接上代码加注释 // 下面的插件是chalk插件,他的作用是在控制台中输出不同的颜色的字,大致这样用chalk.blue('Hello world'),这款插件只能改变命令行中的字体颜色 var chalk = require('chalk') // 下面这个是semver插件,是用来对特定的版本号做判断的,比如 // semver.gt('1.2.3','9.8.7'

//验证是否为空    function check_blank(obj, obj_name){         if(obj.value != ''){                  return true;           }else{               alert(obj_name + "所填不能为空!");             obj.value = "";            return false;           }   

/** * @param begin 截取开始的索引 * @param num 截取的长度 */ //截取字符串(包括中文) function SetString(str, len) { var strlen = 0; var s = ""; for (var i = 0; i < str.length; i++) { var m = str.charAt(i).match(/[^\x00-\x80]/g);//利用match方法检索出中文字符并返回一个存放中文的数 if (m!

function isIE() { //ie? if (!!window.ActiveXObject || "ActiveXObject" in window) return true; else return false; } 转自http://blog.csdn.net/ranbolwb/article/details/18555847

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性检测</title> <style> *{margin: 0;padding:0;border:none;} #tip{ width:400px; height:300px; } #T{ width:400px; height:200px;

window 和 document : window 对象表示浏览器打开的窗口,可以省略 document对象(浏览器的html文档)是window对象的一部分 document.body等于window.document.body document.location === window.loacation document.location.href === location.href(location是一个对象) window相关的 width和height: window.innerHe

1.offsetLeft/offsetTop offsetLeft/offsetTop : 到定位父级节点的距离. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ padding: 20px; } #wrap{ width: 100%; h

前言 大多数的应用软件都需要输入一些验证码,验证码的样式也多种多样. 比如抢票,提交订单需要验证码,很多人就纳闷了,怎么还需要验证码呢?这不是浪费时间嘛. 存在即合理,合理就是现实的. 源码下载地址+演示地址 百度网盘源码下载地址:https://pan.baidu.com/s/1l4ym4jsqEk1gRJTWTve6Gw 提取码:xion 在线演示地址:http://www.xiongze.net/yanzheng/index.html 效果图GIf 什么是验证码 验证码(CAPTCHA):

offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将margin-left加入计算 offsetTop 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最顶端端这时候不管滚动条移到哪) 当前元素向上的位置 记住它会将margin-top加入计算 offsetWidth 获取盒子的 宽

HTML: 1.标签的有开有合. 2.避免冗余代码,例如去除空格字符. 3.合理利用标签语义化. 4.合理的嵌套规则,避免行元素内嵌套块元素. 5.img标签内需要添加title属性和alt属性. 6.a标签内需要添加title属性. 7.Meta标签的优化(过去搜索引擎优化的重要手法,现在已经不是关键因素,但仍不可忽略)主要包括: Meta description.Meta keywords的设置 关键字密度要适度,通常为2%-8%,也就是说你的关键字必须 在 页面中出现若干次,或者在搜索引擎

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="waterfall.css" type="text/css"> <script src="wa

今天来了解一下js中定时器的两种用法.js中包括2种定时器,分别是:           间隔型定时器:setInterval(开)    clearInterval (关)            延时性定时器:setTimeout(开)   clearTimeout  (关)     (1)间隔型定时器:           间隔型定时器功能是每隔指定时间进行一次操作,直到定时器关闭: setInterval(function(){ alert('a');},1000);   //每隔1000

每次看到js中的clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到这些已经不值一两次了,然后每次都要查看一下各自的区别,才能决定使用哪个. 今天特地花了一点时间整理了下各自的区别,本篇主要以chrome为准,可能各个浏览器之间还是有一些区别,但很多自己还未真正遇到过,还不是很清楚,等以后碰到了类似的兼容性问题,再记录到这里,这次就chrome浏览器中各个属性的区别

1. 窗口的大小即浏览器的大小: window.innerWidth, window.innerHeight, window.outerHeight, window.outerWidth 在IE9+,Safari,Firefox, Chrome中,outerWidth和outerHeight返回浏览器窗口本身的大小(无论是从最外层的window对象还是从某个框架访问), innerHeight和innerWidth是指视口的大小,即浏览器可视区域的大小. 在opera中,outerWidth和o

offset偏移(返回的是number类型) offsetLeft:返回盒子距离左边的距离 offsetTop:返回盒子距离顶部的距离 offsetHeight:返回盒子的高度,包括border,padding,不包括margin; offsetWidth:返回盒子的宽度,包括border,padding,不包括margin; offsetX: offsetY: offsetParent:找到有定位的父元素 offset与style.top的区别: 1.offset可以返回没有定位的盒子距离左边

关于js的宽高,随便一搜就是一大堆.这个一大堆对我来说可不是什么好事,看的头都大了.所以今天就总结了一些比较会常用的,并说明一下应用场景. 先来扯一下documentElement和body的微妙关系: documentElement===html  ----->>    documentElement.childNode[2]===body  [很明显,父子关系呗] 如果<! doctype html>中没声明html,则拿不到documentElement这个值,但此时body

大家好,我是唯芸星,这是我的一点点学过的知识,呈现给大家                   1:正则表达式 包括: 1:正则表达式包括两部分 ①:定义正则表达式的规则 ②:正则表达式的规模(i/g/m) 2:声明正则表达式: ①:字面量声明: var reg =/表达式规则/表达式模式: eg : var reg=/white/g; ②:使用new关键字: var reg = new RegExp("表达式规则","表达式模式") eg: var reg= new

前言: 在业务当中,我们经常要计算元素的大小和元素在页面的位置信息.比如说,在一个滚动区域内,我要知道元素A是在可视区内,还是在隐藏内容区(滚动到外边看不到了).有时还要进一步知道,元素是全部都显示在可视区,还是有部分在可视区部分在隐藏内容区.有时还要进一步知道,在隐藏内容区的那一部分是占多大的大小.so,来聊聊如何获取元素的大小和位置信息. 偏移量:计算元素距离顶部的高度 在二维的世界里,可以想象成一个二维坐标系.每一个元素在坐标系内都有两个基本的属性:大小和位置. 大小: dom元素在页面的