章节
问答
课签
笔记
评论
占位
占位

理解样式

我们知道HTML样式定义的三种方式:

<link/>外部引入也就是定义 CSS 中的
<style/>嵌入式样式
style特性地定义

给一个HTML元素设置css属性,如:

var head= document.getElementById("head");
head.style.width = "20px";
head.style.height = "10px";
head.style.display = "block";

这是 DOM2 级样式提供的 API 了,这里总的来说还涉及了3个问题,当然也是 jQuery 内部需要解决与优化的问题。

1.单一的设置太麻烦,而且每次style一次就等于浏览器要绘制一次,当然高级的浏览器是可能会合并 style 的次数的
2.style 接口只能针对行类样式,对于 link 引入的样式,无法获取
3.样式属性名的兼容问题,比如驼峰,保留字 float

样式规则

任何支持 style 特性的 HTML 元素在 js 中有一个对象的 style 属性,其实也是一个实例,但是内部属性命名都是采用的驼峰形式的,比如 background-image 要写成  backgroundImage,其中一个是比较特殊的就是 float,保留字嘛所以就换成 cssFloat,IE : styleFloat,然后对于width、hight这些处理都最好要有一个量度单位。

合并cssText

可能针对一种情况给出的处理就是 cssText 合并。

var head= document.getElementById("head");
head.style.cssText="width:20px;height:10px;display:bolck";

和 innerHTML 一样,cssText 很快捷且所有浏览器都支持。此外当批量操作样式时,cssText 只需一次 reflow,提高了页面渲染性能。当然如果是在创建的时候,我们还可以利用文档碎片,缺点自然就是样式被整体覆盖了,所以在处理的时候应该要先获取需要保留的样式然后再拼接起来。

样式访问

之前说过了 style 只能获取行类样式了,那么CSS外部样式表定义的样式如何处理?

DOM2 规范增加了 defauleView 接口,提供了 getComputedStyle() 方法可以返回了类似 style 属性的 css 的属性合集

getComputedStyle与style的区别

区别就在于 getComputedStyle 是只能读的,style是可以可读可写的。

看看jQuery的:

elem.ownerDocument.defaultView.getComputedStyle(elem, null);

实际就是:

function getStyles( elem ) {
   return window.getComputedStyle( elem, null )
}

没有defauleView前缀,查了下在浏览器中,该属性返回当前 document 对象所关联的 window 对象,如果没有,会返回 null,应该就能直接window调用了。当然啦,IE 这个老大反正就不怎么守规矩了,getComputedStyle 方法 IE6~8 是不支持,所以自己弄出来了currentStyle,处理类似 style 的处理了,jQuery2X 可以无视IE9以下的兼容了,所以这个略过。

以上就是样式操作需要了解的基础,那么总的来说 jQuery 需要的处理问题就显而易见了。

1 参数传递
2 命名规范
3 访问规则
4 性能优化

 

任务

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?