DOM事件流的三个阶段

DOM事件流的三个阶段
流 流的概念,在现今的JavaScript中随处可见。比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流。都是流的一种生动体现。 至于流的具体概念,我们采用下文的解释: 用术语说流是对输入输出设备的抽象。以程序的角度说,流是具有方向的数据。 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题。那就是页面中的哪一部分拥有特定的事件? ...

如何通过js获取隐藏元素的高度

如何通过js获取隐藏元素的高度
当一个元素的样式被设置了display: none时,它的高度相关属性值为 0。 这是因为修改display属性会触发元素的重排和重绘,而元素重排时将会重新计算它的一些属性值。被设置display: none的元素不占用文档空间,自然计算到的高度值为 0。 隐藏元素的方式 “隐藏”元素的方式有多种,除了设置display: none以外,还有visibility: hidden、opacity: 0、height: 0; overflow: hidden、transform...

div垂直居中的N种方法

div垂直居中的N种方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生 效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的...

不定宽高垂直居中分析

不定宽高垂直居中分析
昨天做移动项目是,遇到这样一个案例,如图,图片容器随着视口宽度进行自由拉伸扩张,图片不定宽高,垂直居中: 当时做这个布局的时候,我一直想到用display:table-cell通过vertical-align:middle,来实现居中,可以当我在同一个节点用position:absolute,会导致此居中问题失效。 最后想到的解决方案,案例如下,不定宽高垂直居中: <!DOCTYPE HTML> <html lang="en-US"...

vue.js基础指令列举及总结

vue.js基础指令列举及总结
1.v-bind 绑定dom元素属性 <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </span> </div> var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date() } }) 2.v-if 条件 如果后面的值是true则显示。 根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / ...

5ucms调用标签使用范例

5ucms调用标签使用范例
固定大类下所有子类内容(不包含子栏目名),如ID=4时 <!--channel:{ $table=channel $Where=id=4 }--> <!--List:{ $Row=10 $cid=[channel:childids] $Type=Images $Order=[ID] Desc }--> <a href="[list:aurl]" target="_blank"><img width="158" height="157" src="[List:indexpic $width=158 $height=157]" alt="[List:titlex]" /></a><br /&...

是时候采用SVG Sprite来做背景图了

是时候采用SVG Sprite来做背景图了
SVG Sprite 传统的做法 使用AI或者合并SVG图像,然后用background-postion; 打开AI,新建一个30 * 60(px)的画布,设置好网格和参考线. 用AI打开svg文件,然后复制路径到画布上调整大小 其他就和css-sprite没有差异了 .icon-bg{ display: inline-block; width: 30px; height: 30px; background: url(./res/svg-sprite-background.svg); background-size:100% 100%; verti...

大牛深度解析大数据可视化、可视分析案例

大牛深度解析大数据可视化、可视分析案例
大数据可视化是个热门话题,在信息安全领域,也由于很多企业希望将大数据转化为信息可视化呈现的各种形式,以便获得更深的洞察力、更好的决策力以及更强的自动化处理能力,数据可视化已经成为网络安全技术的一个重要趋势。 1什么是网络安全可视化?攻击从哪里开始?目的是哪里?哪些地方遭受的攻击最频繁通过大数据?网络安全可视化图,我们可以在几秒钟内回答这些问题,这就是可视化带给我们的效率。大数...

大屏数据可视化设计

大屏数据可视化设计
大屏数据可视化设计方法论很少,正好自己参与过部门多个大屏项目,所以总结了大屏可视化设计的方法。希望通过这篇文章能帮助大家整理思考过程,提高工作效率,同时很好的达到目标,找到兴趣。 下图为参与过的项目大屏主要部分。 该图为Gif动态图,点击放大可见动态 图中数据由于安全保密性,具体文案都作了处理 先给大家讲下大屏自身的特点: 1.面积巨大——用户站远才能看全内容(...

如何防止XSS攻击

如何防止XSS攻击
XSS攻击 XSS攻击类似于SQL注入攻击,攻击之前,我们先找到一个存在XSS漏洞的网站,XSS漏洞分为两种,一种是DOM Based XSS漏洞,另一种是Stored XSS漏洞。理论上,所有可输入的地方没有对输入数据进行处理的话,都会存在XSS漏洞,漏洞的危害取决于攻击代码的威力,攻击代码也不局限于script。 DOM Based XSS DOM Based XSS是一种基于网页DOM结构的攻击,该攻击特点是中招的人是少数人。 场景一: 当我登录a...
Copyright © 前端技术分享休闲玩耍去处分享-大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: