代码干货|内联 Style 简写属性的发现
来源:互联网 发布:网络犯罪的危害 编辑:程序博客网 时间:2024/06/05 07:28
详见原文链接
内联 Style 简写属性的发现
开始
平时在使用内联样式简写属性的时候,可能没有考虑到浏览器解析的问题。问题不大,简写的好处是代码量少,但最近发现了一个有意思的内联简写属性的问题。
以下问题仅在内联样式里会出现,如果是通过 style 标签或 css 文件引入则不会有这样的问题。
例子
background
设置一个元素的背景色为白色,比如这么写:
<div style="background: #fff;"></div>
你可能以为浏览器会这样输出:
<div style="background-color: #fff;"></div>
一下少了 6 个字节,而浏览器的真真实解析情况是:
潜在的问题是:**将会默认设置一些其他的属性到样式里,而通过 CSS 又很难恢复这种默认属性**。
验证
我们来验证一下这个问题:
使用属性简写的浏览器呈现:
而非简写的呈现:
上面例子里的 HTML 代码:
<div style="background: #fff;"></div>
那么:
$0.style.backgroundImage === '' // => false
而如果例子修改为:
<div style="background-color: #fff;"></div>
那么:
$0.style.backgroundImage === '' // => true
font 验证
另外一个例子是 font
属性,也会有这个问题:
这个时候:
$0.style.fontWeight === '' // => false
结果:
$0.style.fontWeight === '' // => true
结论
能看到通过 style 获取元素属性时会返回非预期结果,所以使用 CSS 处理这类样式,最好是只设置你需要的属性,尽量不要简写,除非你明确知道这个操作的结果。
要是咱的文章给您带来了帮助,或是您希望咱接着更新
那麻烦您给咱点个赞呗!
阅读全文
1 0
- 代码干货|内联 Style 简写属性的发现
- CSS的简写属性
- 如何去掉内联样式 通过style属性定义的(element.style)
- Jquery的代码简写
- CSS代码的简写
- 代码干货 | class与style绑定
- background 背景属性的简写
- 原生JS获取内嵌,外部css样式,使用style只能直接获取内联style的属性值
- ckediter图片内联属性style笨而有效的去除方法
- 代码干货 | vue计算属性
- ckplayer播放器的style.zip(干货)
- CSS中外联link属性、内嵌style元素、@import指令、内联style属性、注释
- C#中属性getset的简写
- Style的所有属性
- div.style的属性
- memcpy 内联汇编简写版
- 简写的通用数据层代码
- 简写的通用数据层代码
- HDU
- 【YOLO CUDA】libcudart.so.8.0: cannot open shared object file
- QT中鼠标响应函数setMouseCallback类型不匹配问题解决
- hadoop上路记
- Java网络编程
- 代码干货|内联 Style 简写属性的发现
- 使用idea创建多模块maven工程
- Flume架构以及应用介绍
- 自动获取ip
- 杂谈
- 迪菲-赫尔曼秘钥交换(Diffie-Hellman Key Exchange)
- codeforces 731A Night at the Museum
- #struts2零配置中的常量配置
- 贪心算法例题:2072删数问题