一、跨浏览器事件 跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } } 跨浏览器移除事件 //跨浏览器移除
1 点击300ms 使用fastclick 2 移动端1px 在ios中使用0.5px 3 js中获取浏览器高度，获取scrollTOP等属性需要兼容 4 H5 的audio在ios上autoplay播放 一般使用进入页面后，使用js控制播放 5 在html上加overflow：hidden属性的时候，好多移动端浏览器都不支持 要实现超出范围隐藏，滚动条不显示，一般使用js获取高度来动态设置html高度 6 ios系统中在移动浏览器的页面中给按钮加JS事件，其按钮必须是原生HTML按钮或者
------------------------------------盒子模型常用的八个属性--------------------------------- Js盒子模型 Js盒子模型指的是通过js提供的一系列的属性和方法，获取页面中元素的样式信息值 client系列(当前元素的私有属性) clientWidth/clientHeight:内容的宽度/高度+左右/上下填充，（和内容溢出没有关系） clientLeft:左边框的宽度(borderLeftWidth) clientTop:上
WebRTC 技术由 Google 最先提出，目前主要在桌面版 Chrome 浏览器、桌面版 Edge 浏览器、桌面版 Firefox 浏览器、桌面版 Safari 浏览器以及移动版的 Safari 浏览器上有较为完整的支持，其他平台（例如 Android 平台的浏览器）支持情况均比较差。
最近用uni-app开发h5应用时，需要适配全面屏，所以查阅相关资料，将修改涉及到的一些注意点分享一下。
jquery获取窗口高度和窗口高度，$(document).height()、$(window).height()
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
这是一个困扰我一周的问题了，不过现在终于在@Mr.L的协助下解决了，下面先描述下问题吧。大家在浏览QQ空间的时候，通过浏览器，或者按住ctrl+鼠标滚轮进行页面缩放，页面上会有个很友好的提示，如：
selenium 是一个可以模拟浏览器操作的工具，据我所知，不仅仅是 Python，还有其他的编程语言也有支持的 selenium 库，可以作为爬虫或者自动化测试。当然，还有今天要说的，可以使用 selenium 来作为全网页截图工具。
前端性能优化，是每个前端必备的技能，优化自己的代码，使自己的网址可以更加快速的访问打开，减少用户等待，今天就会从几个方面说起前端性能优化的方案，
不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。 浏览器内核主要分为两种，一是渲染引擎，一个是js 引擎，内核更加倾向于说渲染引擎。 常见的浏览器内核可以分为这四种：
Internet Explorer（简称：IE）是 微软公司 (https://baike.baidu.com/item/微软公司/732128) 为了对抗 网景浏览器 (https://baike.baidu.com/item/网景浏览器)（NetscapeNavigator）从而投入开发，并于 1995 年推出的一款网页浏览器，曾经一度成为同 Windows 系统捆绑安装的流氓软件横行于世，也占据了极高的市场份额，但在近些年里，它却一直因为本身的落后而被众多用户和开发者诟病。
[获取元素具体的某个样式值] 1.[元素].style.xxx 操作获取 只能获取所有写在元素行内上的样式(不写在行内上,不管你写没写都获取不到,真实项目中我们很少会把样式写在行内上),outer.style.width =>'' (width是写在样式表中的) 2.获取当前元素所有经过浏览器计算的样式 经过计算的样式：只要当前元素可以在页面中呈现（或者浏览器渲染它了），那么它的样式都是被计算过的 不管当前样式写在哪,不管你是否写了(浏览器会给元素设置一些默认样式) 标准浏览器(IE9+) window.getComputedStyle([元素],[伪类,一般都写null]) 获取到当前元素所有被浏览器计算过的样式(对象) IE6~8 [元素].currentStyle 获取经过计算的样式
使用requestAnimationFrame代替setTimeout和setInterval：
做好了项目之后,在各种浏览器里面测试,都没有问题.很高兴,交付后端使用.然而发现在微信自带浏览器里面,却是出现了问题.
利用JS来控制页面控件的显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。
在测试的时候，我发现调整浏览器尺寸后，原先靠近浏览器边缘的窗口就直接被隐藏掉了，如下图：
selenium并不是万能的，有时候页面上操作无法实现的，这时候就需要借助JS来完成了。
第一种情况就是宽高都写在样式表里。 比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度。 第二种情况就是宽和高是写在行内中。 比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。（什么是行内，就是直接在html标签上写样式） 小结，因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内，所以我们
BOM的核心是window,它是一个浏览器的功能实例，浏览器会为HTML文档创建一个专属的window对象，并为每一个框架创建额外的window对象。 window对象是BOM的顶层，所有其他对象都是通过window对象衍生的；但是在调用子对象的时候并不强制要求声明
因为这篇文章前戏很长，所以将结果放在了最前面呈现，完整的示例可以前往 https://masonry.daidr.me 查看。
大家好，又见面了，我是你们的朋友全栈君。 Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html
把公共的 页头 、页脚、导航栏、边框 放到最顶层，比方说设置层级为 999，其他每个独立页则放在下面，然后切换页面的时候更新独立页的层级以达到效果图的效果（当然不能超过最顶层）。
小包在学习阮一峰大佬的《ES6入门教程》时，对文章顶部的阅读进度功能产生了浓厚的兴趣。小包当时猜想应该是使用 JavaScript 实现的，但最近爱上了浩如烟海的 CSS ，于是小包有个大胆的想法，单纯的 CSS 能实现阅读进度功能吗？
学习原生js的人一定会接触到client家族、scroll家族和offset家族。其中clienHeight、scrollHeight和offsetHeight一般用来求网页内容的高度，而对应的clientWidth、scrollWidth和offsetWidth则用来求网页内容的宽度，由于width和Height属性是类似的，所以这里我只挑这三个height来讲一下。
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家的支持。
Quirks模式和Standards模式的区别： 首先，严格模式（又称标准模式，Standards模式）和混杂模式（Quirk模式）都是指浏览器的呈现模式，要与Doctype的两种风格区别开来（严格（ strict ）和过渡（ transitional ），过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本）。
虽然自己的网站流量十分少，但是还是加了一个谷歌广告，用来自己耍。添加之后发现很多电脑浏览器插件很直接进行屏蔽，手机浏览器也会进行屏蔽。虽然自己也不喜欢广告，但是如何在检测出广告被屏蔽后在原来位置上输出一句话提醒浏览者不要关闭本站的广告展示呐？ 自己在网上找了一些有用的方法，一种是检测广告div的高度，如果高度是0则进行了屏蔽，另一种是自己建一个js，其名称和路径与真实广告的js差距不大，能让插件误拦截，通过检测该js是否加载来判断是否遭到屏蔽。 因为不同的广告插件可能自己拦截方式不同，我就把这两种方法结合一下来进行判断。 首先在自己的广告单元上加两个div（可以根据自己的需求，自行更改）
jquery获取尺寸的方法 width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。 height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
因为CSS里部分属性是继承父级而来的，height就是其中之一，当前html标签height为0，自然而然body100%也为0。
position属性取值：static(默认)、relative、absolute、fixed、inherit、sticky。 float属性取值：none(默认)、left、right、inherit。 display属性取值：none、inline、inline-block、block、table相关属性值、inherit。 固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。（脱离文档流） 相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。 绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于 。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。（脱离文档流） 粘性定位 sticky： 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。 默认定位 Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声 明）。 inherit: 规定应该从父元素继承 position 属性的值。
浏览器有着大量不同的版本，不同种类的浏览器的内核也不尽相同，所以不同浏览器对代码的解析会存在差异，这就导致对页面渲染效果不统一的问题。
首先打开另一个小网站 -- https://www.hwtelcloud.com/products/rpa,下载【设计器】，并进行使用激活；下载【执行器】，让程序自己动；此外还需下载浏览器驱动和安装浏览器插件。关于软件的下载安装等此处就不进行讲解，相信您能搞定！
一、懒加载 1.什么是懒加载 目前，网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度。 2.懒加载的原理 页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。 懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
https://www.cnblogs.com/poloyy/category/1680176.html
除了初始化时设置之外，Fabric.js 还提供了其他 api 供后期修改画布宽高。
1.DOM Tree：浏览器将HTML解析成树形的数据结构，构建一颗DOM树，同时进行第三步。
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
3.这里可以修改scrollTop 的值，来定位右侧滚动条的位置，0是最上面，10000是最底部。
嗨！大家好！我是法医，一只治疗系前端码猿🐒，与代码对话，倾听它们心底的呼声，期待着大家的点赞👍与关注➕。 📢 最近整理了一些前端高频面试题，分享给大家，如有问题欢迎留言指正，面试专栏我会长期更新，欢迎大家点赞🤞、收藏📌，感谢！ 1. 什么是 DOCTYPE， 有何作用？ Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。在浏览器发展的过程中，HTML出现过很多版本，不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？
关于js中的offsetWidth、clientWidth、scrollWidth等一系列属性及其方法一直都傻傻分不清，这里就来总结一下这些方法的用法和含义。
在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。抽空整理了我自己常用到的，时间仓促，没有考虑到万恶的IE浏览器。。。。 获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height window.screen.width 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight window.screen.availWidth 网页全文的高度和宽度： document.body.scrollHeight document
面对着产品同学不断的询问：为什么 h5 的体验这么差？为什么不能和 app 的播放体验保持一致？我们对着 h5 不明确的文档和不同浏览器的怪异表现欲哭无泪。
本文来自“小时光茶社（Tech Teahouse）”公众号 作者简介： 文赫，2015年加入腾讯，作为前端开发工程师参与过手Q游戏公会，游戏中心，企鹅电竞等项目，具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目，直播和视频播放是其中的核心。面对着产品同学不断的询问：为什么h5的体验这么差？为什么不能和app的播放体验保持一致？我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。 经过一系列的调研爬坑，斩荆披棘，我们一步步提升了体验，做到了和app基本一致的体验。在摸索优化背后，我们也想把这些问题
本地同一浏览器访问本地HTML文件和访问服务器端HTML文件，本地Iframe没有自适应高度，而服务器端的Ifrane自适应了高度。
CSS 布局本质就是控制元素的位置和大小。比如这样的布局：元素宽960px，水平居中。宽960px是大小。水平居中是位置。又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。
获得网站的图标： 网址 + “/“ + favicon.ico 如获得淘宝网的图标
博主：文本溢出倒是做过不少，这富文本溢出什么鬼？老夫今天就好好研究一下这个省略号。
最近在做一个自适应的网站，经常遇到需要文本的溢出地方，我写了一个CSS简单设置文本溢出的方法：用css实现文本溢出div显示省略号 但是IE只能设置单行溢出隐藏，Webkit内核浏览器才支持多行溢出，于是找到了这款插件，能够达到不错的效果，用Chrome自带的翻译加上自己的理解写了这么一个教程，希望能对大家有所帮助。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
