renren-markdown vs. firefox style DOM object

firefox.style.dom.md

其实一般弄前端是用不着直接跟DOM打交道的……

但renren-markdown偏偏就需要动态操作CSS，于是就需要操作DOM的style对象…… 问题很快就来了。

1. lowerCamelCase vs. css-case

javascript的习惯：lowerCamelCase为主，UpperCamelCase和FULL_CAPS为辅……
css的习惯：padding-right: 0.5em;

因此用javascript来操作padding-right就应该写作：

el.style.paddingRight='0.5em';

这里的el.style就是el的inline CSS所对应的DOM对象。

目前为止还好——每一个css属性都对应style对象的一个field。但是……

2. style is more than a dictionary

比如这个element:

<span id="abc" style="padding-right: 0.5em;"> content </span>

我想遍历它的所有CSS属性……

Attempt 1

var abc=document.getElementById('abc');
for(i in abc.style) console.log(i);

结果发现不行——所有可能的属性都出来了。（在你指出之前——不，hasOwnProperty也不行。）

Attempt 2

console.log(abc.style.length); //1
console.log(abc.style[0]); //'padding-right'

所以style同时是一个"array-like object"！这样我们就可以很简单地遍历了：

for(var i=0, l=abc.style.length;i<l;i++){
    var k=abc.style[i];
    var v=abc.style[k];
    console.log(k + ' : ' + v);
}
//padding-right : 0.5em

3. similarity ends

如果你用Firefox，上面的代码得到的结果不是一样的。

可以负责任地说，在今天收到bug report之前，我一直以为这样就可以了——因为我用Chrome. 结果：renren-markdown在支持gfm table之后的版本都没法在firefox下跑！

FireBug给出的答案：

abc.style // CSS2Properties { 0= "padding-right-value" , 1= "padding-right-ltr-source" , 2= "padding-right-rtl-source" , more...}

然后，大家还记得一开始提到的lowerCamelCase和css-case吗？ 哈哈，你中招了！

别忘了，javascript中的obj['attr']与obj.attr是一回事。而abc.style[0]即使是padding-right，abc.style['padding-right']也并不是正确的abc.style.paddingRight（但偏巧Chrome支持这种写法）。所以其实这里是需要一次转换的……

4. the standard

RTFM: https://developer.mozilla.org/en-US/docs/DOM/CSSStyleDeclaration

5. solution

因此只要用style对象的这几个method就可以了……吗？

还有一个padding-right-value的问题（margin估计也一样）。最后renren-markdown采用的解决方法很简单：(coffee-script)

# dirty workaround: firefox `padding-right-value` problem
if k.match(/-value$/) && k!='drop-initial-value'
  k=k[0...(k.lastIndexOf('-'))]

至于那个drop-initial-value，估计没人用，但是以防万一，我就加上了。

6. so what the f***?

我觉得firefox这样把实现细节expose出来是极其不科学的。吐槽完毕。