内联 Style 简写属性的发现-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

内联 Style 简写属性的发现

简介: # 内联 Style 简写属性的发现 ## 开始 平时在使用内联样式简写属性的时候,可能没有考虑到浏览器解析的问题。问题不大,简写的好处是代码量少,但最近发现了一个有意思的内联简写属性的问题。 以下问题仅在内联样式里会出现,如果是通过 style 标签或 css 文件引入则不会有这样的问题。 ## 例子 ### background 设置一个元素的背景色为白色,

内联 Style 简写属性的发现

开始

平时在使用内联样式简写属性的时候,可能没有考虑到浏览器解析的问题。问题不大,简写的好处是代码量少,但最近发现了一个有意思的内联简写属性的问题。

以下问题仅在内联样式里会出现,如果是通过 style 标签或 css 文件引入则不会有这样的问题。

例子

background

设置一个元素的背景色为白色,比如这么写:

<div style="background: #fff;"></div>

你可能以为浏览器会这样输出:

<div style="background-color: #fff;"></div>

一下少了 6 个字节,而浏览器的真真实解析情况是:

screenshot.png

潜在的问题是:将会默认设置一些其他的属性到样式里,而通过 CSS 又很难恢复这种默认属性

验证

我们来验证一下这个问题:

使用属性简写的浏览器呈现:

Snip20161217_4.png

而非简写的呈现:

Snip20161217_5.png

上面例子里的 HTML 代码:

<div style="background: #fff;"></div>

那么:

$0.style.backgroundImage === '' // => false

而如果例子修改为:

<div style="background-color: #fff;"></div>

那么:

$0.style.backgroundImage === '' // => true

font 验证

另外一个例子是 font 属性,也会有这个问题:

Snip20161217_10.png

这个时候:

$0.style.fontWeight === ''  // => false

Snip20161217_11.png

结果:

$0.style.fontWeight === ''  // => true

结论

能看到通过 style 获取元素属性时会返回非预期结果,所以使用 CSS 处理这类样式,最好是只设置你需要的属性,尽量不要简写,除非你明确知道这个操作的结果

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: