JS获取DOM元素CSS样式的方法

CSS 样式有两种类型:
1.行内样式,即通过元素的 style 属性定义的样式。
2.非行内样式,即通过 <style> 标签或引入外部 CSS 文件定义的样式。
针对 DOM 元素的行内样式,可以从 DOM.style 样式集合中读取对应行内样式属性,如:DOM.style.width、DOM.style.height 等。而要获取非行内样式,则需要通过 window.getComputedStyle()(W3C)方法或 DOM.currentStyle(IE)当前样式集合属性去获取。 继续阅读

发表在 JavaScript | 标签为 , , , , | JS获取DOM元素CSS样式的方法已关闭评论

HTTP的三次握手与四次挥手

目录

1.HTTP 的三次握手
2.HTTP 的四次挥手

HTTP 的三次握手

三次握手(Three-way Handshake)是指在客户端和服务器之间建立一个 TCP 连接,总共需要发送 3 个包,其中客户端向服务器发送 2 个包,服务器向客户端发送 1 个包。进行三次握手主要是为了确认双方的接收能力和发送能力,并且根据双方的序列号和确认号,在客户端和服务器之间建立可靠的 TCP 连接用于传送数据。 继续阅读

发表在 HTTP | 标签为 , , | HTTP的三次握手与四次挥手已关闭评论

JS var、let、const 关键字的区别一览

var 关键字:ES5 标准,用 var 关键字声明的变量存在声明提升,即会将变量提前到当前作用域顶部进行声明,不存在块级作用域,允许重复声明同名变量,变量声明后可被修改。
let 关键字:ES6 标准,声明的变量不存在声明提升,变量在当前块作用域及子作用域内才可访问,不允许重复声明同名变量,变量声明后可被修改。 继续阅读

发表在 JavaScript | 标签为 , , , , | JS var、let、const 关键字的区别一览已关闭评论

JS 严格模式与非严格模式的区别

在 JavaScript 脚本的开头添加

"use strict";

'use strict';

即可使用严格模式,在函数内部的开头添加则表示只在函数内使用严格模式。

为什么使用严格模式?

1.可以避免一些不合理、不严谨 JavaScript 代码逻辑(如给未定义的变量赋值会报错);
2.提高 JavaScript 代码运行的安全性(如 eval() 函数会创建独立的作用域);
3.提高 JavaScript 解释器的编译效率,提升代码运行性能;
4.为未来新版本的 JavaScript 做好铺垫。 继续阅读

发表在 JavaScript | 标签为 , , , | JS 严格模式与非严格模式的区别已关闭评论

回流/重排(reflow)与重绘(repaint)

回流/重排(reflow): 渲染树(Render Tree)中一些节点的尺寸、位置、可见性等属性发生改变时需要重新计算几何信息,浏览器重新渲染页面,导致页面布局变化的过程。
重绘(repaint): 当页面元素的样式改变不影响其在文档流中的尺寸、位置、可见性,如改变元素的字体颜色、背景颜色等,就是重绘,这个过程不会导致页面的布局变化。 继续阅读

发表在 前端 | 标签为 , , | 回流/重排(reflow)与重绘(repaint)已关闭评论

CSS3阴影box-shadow属性使用总结

使用 CSS3 的 box-shadow 属性,可以实现给元素添加阴影的效果。
语法:

box-shadow: offset-x offset-y blur spread color inset;

继续阅读

发表在 CSS | 标签为 , , , , | CSS3阴影box-shadow属性使用总结已关闭评论

浏览器渲染页面过程

浏览器从服务器获取到 HTML 文档后,HTML 解释器开始对 HTML 自上而下解析,构建 DOM Tree(DOM 树)。CSS 解释器解析 CSS,构建 CSS Rule Tree(CSS 规则树)。文档解析完成后,将 CSS Rule Tree 附加到 DOM Tree 生成 Render Tree(渲染树)。而后,Layout(布局)会从渲染树的根节点开始遍历,输出渲染树上每个节点在页面上的具体大小和位置。 继续阅读

发表在 前端 | 标签为 , | 浏览器渲染页面过程已关闭评论

JS DOM事件汇总

onanimationstart 事件在 CSS 动画开始播放时触发。
onanimationiteration 事件在重复 CSS 动画时触发。
onanimationend 事件在 CSS 动画完成时触发。
ontransitionend 事件在 CSS 转换完成时触发。
onbeforeprint 事件在页面即将被打印或打印对话框出现前触发。
onafterprint 事件在页面已开始打印,或打印对话框已关闭时触发。 继续阅读

发表在 JavaScript | 标签为 , , , | JS DOM事件汇总已关闭评论

JS获取页面滚动条位置的方法(含浏览器测试)

在 Javascript 中,获取页面滚动条位置的 DOM 属性有:document.body.scrollTop / document.body.scrollLeft、document.documentElement.scrollTop / document.documentElement.scrollLeft,但存在浏览器兼容性问题,以下是测试结果:
1、document.body.scrollTop / document.body.scrollLeft
① 存在文档声明(<!DOCTYPE html>)
谷歌浏览器:正常
360浏览器:正常
火狐浏览器:0
IE浏览器:0 继续阅读

发表在 JavaScript | 标签为 , , | JS获取页面滚动条位置的方法(含浏览器测试)已关闭评论

什么是BFC(块格式上下文)?

BFC,英文全称:Block Formatting Context,即“块格式化上下文”,是 CSS2.1 规范中的一个概念,定义了浏览器对于 Web 页面中的独立的渲染区域的布局规则。
规范原文是这样描述的,“A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context”,翻译成中文就是“一个块格式上下文包含创建该上下文的元素的所有子元素,但是不包括创建了新的块级格式上下文的子元素的内部元素”。 继续阅读

发表在 CSS | 标签为 , | 什么是BFC(块格式上下文)?已关闭评论