4-1 理解样式
本节编程练习不计算学习进度,请电脑登录imooc.com操作

理解样式

我们知道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 性能优化

 

任务

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  5. <style>
  6. #a:{
  7. color: blue;
  8. background: gray;
  9. }
  10. </style>
  11. <script src="http://code.jquery.com/jquery-latest.js"></script>
  12. <title></title>
  13. </head>
  14. <body>
  15.  
  16. <div id="a">慕课网</div>
  17. <button id="addCSSRule">增加背景颜色</button>
  18. <button id="removeCSSRule">移除颜色</button>
  19.  
  20. <script type="text/javascript">
  21.  
  22. function addCSSRule(key, value) {
  23. var css = document.styleSheets[document.styleSheets.length - 1];
  24. css.cssRules ?
  25. (css.insertRule(key + "{" + value + "}", css.cssRules.length)) :
  26. (css.addRule(key, value));
  27. }
  28.  
  29. function removeCSSRule(key) {
  30. for (var i = 0; i < document.styleSheets.length; i++) {
  31. var css = document.styleSheets[i];
  32. css.cssRules ?
  33. (function() {
  34. for (var j = 0; j < css.cssRules.length; j++) {
  35. if (css.cssRules[j].selectorText == key) {
  36. css.deleteRule(j);
  37. }
  38. }
  39. })() :
  40. (css.removeRule(key));
  41. }
  42. }
  43.  
  44.  
  45. $("#addCSSRule").click(function(){
  46. addCSSRule("#a","color:red;background:yellow")
  47. })
  48.  
  49. $("#removeCSSRule").click(function(){
  50. removeCSSRule("#a")
  51. })
  52.  
  53. </script>
  54. </body>
  55. </html>
下一节