美文网首页
一句话显示页面元素边框

一句话显示页面元素边框

作者: rocneal | 来源:发表于2016-10-12 00:38 被阅读0次

同一个页面效果,所有前端的开发人员都能实现。但是如何判定谁做的好,往往只能查看源码进行进一步的确定。其实,还可以采用另一种策略来初步的判定页面布局合理性。方法就是给页面的每个元素都加上边框,通过边框来确定元素的布局、位置、大小等是否合理。

在浏览器的控制台中输入下面一句JS代码,即可显示当前页面所有元素的边框:

[].forEach.call($$('*'), function(a) {
    a.style.outline = "1px solid #" + (~~(Math.random()*(1<<24))).toString(16);
});

代码说明

1 选取所有元素

$$('*') 等价于 document.querySelectorAll('*')

2 改变元素边框颜色

让元素有一个漂亮的边框,这行代码使用了CSS的outline属性。有一点你可能不知道,在CSS渲染的盒子模型(Box Model)中,outline并不会改变元素及其布局的位置。因此这比使用border属性要好得多,所以这一部分其实并不难理解。$$和$选择器的历史

a.style.outline="1px solid #" + color

怎样定义颜色值其实是比较有意思的

~~(Math.random()*(1<<24))).toString(16)

我们想构造的其实是一个16进制的颜色值,像白色 FFFFFF,蓝色 0000FF 等等。

首先我们学到了可以使用数字类型的 toString 方法进行十进制到16进制的转换。

其实你可以用它进行任意进制的转换

(30).toString();   // "30"
(30).toString(10); // "30"
(30).toString(16); // "1e" 16进制
(30).toString(2); // "11110" 二进制
(30).toString(36); // "u" 36 是最大允许的进制

因此16进制中的 ffffff其实是 parseInt("ffffff", 16) == 1677721516777215是2^24 - 1 的值

因此左位移操作乖以一个随机数 Math.random()*(1<<24) 可以得到一个 0 到 16777216 之间的值

但是还不够,Math.random 返回的是一个浮点数字,我们只需要整数部,这里使用了 “~” 操作符(按位取反操作)。

这行代码并不关心正负值。因此通过两次取返就可以得到纯整数部,我们还可以将 ~~ 视为 parseInt 的简写:

var a = 12.34, // ~~a = 12
    b = -1231.8754, // ~~b = -1231
    c = 3213.000001; // ~~c = 3213
 
~~a == parseInt(a, 10); // true
~~b == parseInt(b, 10); // true
~~c == parseInt(c, 10); // true

如果你仔细看评论你会知道使用 按位或 "|" 操作符也可以得到相同的结果。

~~a == 0|a == parseInt(a, 10)
~~b == 0|b == parseInt(b, 10)
~~c == 0|c == parseInt(c, 10)

我们最终得到了一个 0 到 16777216之间的随机数,然后使用 toString(16) 转换成16进制,它就是这样工作的。

相关文章

  • 一句话显示页面元素边框

    同一个页面效果,所有前端的开发人员都能实现。但是如何判定谁做的好,往往只能查看源码进行进一步的确定。其实,还可以采...

  • 一句话给所有元素边框

    在浏览器的控制台中输入下面一句JS代码,即可显示当前页面所有元素的边框 代码解析 1.选取所有元素 $$('*')...

  • 3.7 样式配置

    样式配置主要设置页面元素的显示属性,如颜色、字体、对齐、边框、边距、图标等。样式配置的学习方法主要是多尝试,配置,...

  • input:focus实现父类边框颜色

    子元素focus,容器边框高亮父选择器效果实例页面

  • 01、02.行内、块级元素、浮动

    块级元素与行内元素: 行内元素: 行内元素不能显示的设置宽高,(span,strong等),垂直的内边距、边框、外...

  • offsetLeft与offsetTop

    offsetLeft 该元素外边框距离包含元素内边框左侧的距离 offsetTop 该元素外边框距离包含元素内边框...

  • 小程序生命周期

    页面载入后触发onShow方法,显示页面。首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会...

  • 5.边框样式-CSS基础

    一、边框 几乎可以对所有元素定义边框。我们可以为div元素、img元素、span元素、table元素定义边框。 1...

  • 学习日志:CSS盒模型

    盒模型 俗称框模型。它定义了元素框处理元素中的内容、内边距、边框,外边距的方式。 页面元素皆为盒模型,div、...

  • web前端入门到实战:CSS盒子模型

    一、什么叫框模型 页面元素皆为框(盒子),定义了元素框处理元素内容,内边距,外边距以及边框的计算方式。 二、外边距...

网友评论

      本文标题:一句话显示页面元素边框

      本文链接:https://www.haomeiwen.com/subject/dzabyttx.html