DOM系列:获取元素位置和尺寸

对于每一位Web开发的同学而言,在CSS的世界当中,每一个元素都是一个盒子,都有描述盒子大小和位置的相关属性。比如CSS的盒模型相关的属性和position相关属性。不过今天我们学习和聊的不是CSS的世界,而是来学习和聊JavaScript中怎么获取元素尺寸和位置。

移动端上的设计和适配

面对于不同移动设备,特别是针对于屏幕高度的设计和适配,一直是困扰着视觉和前端。特别是设计师和前端开发人员之间的协调,沟通的成本也随着增加。那么这篇文档,主要是用于移动端设计和适配(针对屏幕高度方面),希望通过文档的形式能减少设计师和开发人员之间的一些沟通成本,同时让前端开发人员用最低的时间成本来完成终端设备的UI适配工作。

DOM系列:动态添加CSS样式规则

在上一节中学习了如何通过JavaScript来修改CSS样式。简单地说:查询CSS样式(即计算样式),设置单个样式(设置的是行内样式),设置多个样式(通过类来设置样式)。事实上我们还可以通过脚本化CSS这种技术来控制样式。这种方式,可以让我们的页面更加的快速和高效。那就是直接通过JavaScript动态地添加和删除样式表中的某些样式,用来取代不断地查询DOM元素,并应用各种样式。接下来咱们就来学习脚本化样式表相关的知识。

一个制作Web图案的组件:css-doodle

Web中使用一些图案做为背景图案是一种时常可见的,早期一般都是通过图片来完成。直至CSS一些新特性更趋成熟和稳定的时候,会通过CSS的相关技术,比如CSS的渐变属性配合background-size之类的来做一些复杂而又美观的Web图案,运用于background-image之中。随着前端技术不断的革新,不久前看到一个生成Web图片的组件:<css-doodle /> —— 使用CSS绘制图案的Web组件!

制作Loading组件

最近项目中使用到一个Loading效果,其实是一个很简单的效果,主要是因为这个Loading出现在不同的场景之中,而且大小也不一致。对于这样的效果,往往都会想通过组件的方式来处理,其出发点就是更易维护,易扩展。当然,这对于前端的同学而言并没有什么复杂性,也没有多少技术含量。不过我还是希望把这个过程记录下来。

结合SEM和BIO来改进CSS

有人可能会说,CSS很简单,但是“容易”会导致代码混乱。在大家的眼里,使用像Sass或LESS这样的处理器会让事情变得更为简单。但事实上并不一定如此,如果你使用的不小心,你的CSS将变得更难处理,而不是更易处理。Sass?困难吗?Sass的嵌套就展示了这一点,使用不当,Sass的嵌套就是地狱。如果你的Sass代码看起来像这样的,那么你肯定可以使用SEM和BIO来改进你的代码。接下来我就将向你介绍这方面的CSS技术。

我在阿里的三年

时光如梭,转眼一逝,已经在阿里呆了三年了。在阿里有句话 —— 一年香,三年醇,五年陈。另外还有一句话就是说在阿里,要呆完三年才算是阿里人。自己非常的荣幸,有幸在阿里成功的呆了三年,也有幸成人 —— 成为阿里人。借着这次,对自己在阿里过去的三年光阴做一个简单的整理与总结。就算是对过去三年的复盘吧。

DOM系列:样式和类

对于任何一位Web开发者而言,处理CSS样式很多时候还是会借助JavaScript。简单的说,我们会碰到一些交互(或UI效果的变化)都会通过JavaScript来处理style或类。那么今天我们将要学习的是如何通过JavaScript来控制样式和类名,在深入讨论JavaScript处理样式和类的方法之前,我们需要知道在Web页面中元素的样式处理通常有两种方式。

DOM系列:修改DOM

通过前面的学习,我们都知道,DOM并不一定要由存在于HTML中的元素组成。我们仅需要使用几行JavaScript代码就可以将HTML元素添加到你的DOM中。而且你也有能力移动周围的元素,甚至删除它们。除了这一切之外,我们还可以动态地创建和修改DOM中的元素,而且这一DOM操作也是很重要的一个特性,同时也能满足Web网站或应用程序的一些操作。在今天的教程中,我们将继续学习DOM中的一些基础知识。在今天中,我们将研究如何创建元素、删除元素和克隆元素等。简单的说,今天的内容涉及到一些DOM的修改。

DOM系列:Attribute和Property

这两天一直在看DOM元素的attributeproperty,简单让人晕。从直译上,我一开始都理解为“属性”,而且对于我这样的新手,将两者混淆在一起,傻傻的分不清楚。后来经过大大们的指点,知道两者是不同的东西,但两者之间又有紧密的联系。为了能更清晰的整明白两者的关系与不同,所以把自己理解和搜集的资料理了一下,希望对新手有所帮助。

页面

返回顶部