引言

在日常的工作中，很多场景下需要知道一个元素的位置信息与尺寸信息，但是涉及到这方面的属性与方法很多，有时候难以抉择使用哪个方法或属性比较合适，这就需要我们详尽掌握元素位置与尺寸相关的知识，才能熟能生巧，灵活运用。

元素的尺寸

clientHeight&clientWidth

这两个属性都是整数形式的只读的属性，其中:

1
2

clientHeight = CSS height + CSS padding - height of horizontal scrollbar
clientWidth = CSS width + CSS padding

如下图所示:

offsetHeight&offsetWidth

这两个属性也是整数形式的只读的属性，其中:

1
2

offsetHeight = CSS height(include horizontal scrollbar if rendered) + CSS padding + CSS borders (可以理解为元素包括边框的高度)
offsetWidth = CSS width(include vertical scrollbar if rendered) + CSS padding + CSS borders(可以理解为元素包括边框的宽度)

如下图所示:

引言

正则表达式(Regular Expression)是使用单个字符串来描述、匹配一系列符合某个句法规则的一串字符。我在之前的学习工作中，遇到正则表达式，往往都是直接搜索相关问题的结果，或者尝试用其他方法解决。也尝试过学习相关的规则，但是过一段时间不用之后，往往会生疏乃至忘记。这篇文章尝试着理解并消化正则表达式相关的知识。

字符与位置

正则表达式是匹配模式，不是匹配字符，就是匹配位置

匹配字符

特殊字符

正则表达式除了匹配常规的 a-z,A-Z,0-9 等字符外，还存在着一些特殊字符，如下所示

字符组

虽然叫字符组，但是只匹配字符组中的某个字符，比如[abc]只匹配 a,b,c 中的一个。对应的如果不想匹配某几个字符，则需要在字符组最前面加上**脱字符(^)，形如[^abc]，则表示匹配除 a,b,c 之外的其他字符。使用连字符(-)**则可以匹配连续的一段字符，形如 a-z,0-9。另外有如下相关的简写形式来表示对应的字符区间。