理解DOM如何 *** 作CSS样式

我们知道DOM部分其实就是浏览器各大厂商提供的一些列方法和属性的集合，这一系列的属性和方法也被称为接口，这些接口可以让我们更加方便的 *** 作HTML和XML，注意我没有说CSS哦

但我们经常会听到js *** 作css或者脚本化css的说法，那是怎么回事呢？

其实，DOM中提供的方法能 *** 作HTML的所有内容，其中包括能 *** 作元素的属性，而元素的属性中又恰好包含style属性，style属性表示的是该元素行间样式，而且行间样式的权重是1000。所以一般我们通过DOM *** 作元素的属性style就间接的改变了该元素的CSS样式。

DOM *** 作CSS样式其实质是通过DOM控制行间样式，从而达到改变样式的效果。这只能说间接的 *** 作CSS，并非真实的直接 *** 作CSS文件

通过DOM元素的style读写CSS行间样式

格式：ele.style.prop

注：

1. 可读可写行间样式，没有兼容性问题

2. 碰到保留字属性，前面应添加css；例如：float-->cssFloat

3. 复合属性必须拆解

4. 组合单词变成小驼峰式

5. 写入的值必须是字符串格式

用法比较简单，我们深入看看style吧

先随便来两个元素，并选中

我们发现，dom元素的原型的原型都是HTMLElement。于是猜测，style就是定义在HTMLElement的原型链上，所以凡是DOM元素都有style属性。

通过hasOwnProperty进一步验证看看是否就在HTMLElment的原型上

明白style定义在哪里之后，再来看style里面是什么？

目前也只有这种方式能修改CSS样式。

下面再来了解查询样式的方式：

window.getComputedStyle(ele,null)

IE使用另外一直方式代替

ele.currentStyle

最后我们封装一个所有浏览器都能用的方法：

<script type="text/javascript">

var obj = document.getElementById(id)

function style(obj){

obj.style = "font-size:30pxbackground:tealheight:900px"

obj.style = "font-size:100pxopacity:.67width:100px"

}

style(obj)

</script>

参考 http://www.datatables.club/reference/option/dom.html

默认dom的取值为 lrtip ，可以为dom添加其他元素， 或修改位置， 如上实例。

Datatables会添加一些控制元素在表格的周围，比如默认状态下改变每页显示条数（l）的空间在左上角，即使搜索框（f）在右上角，表格的信息（i）显示在左下角，分页控件（p）显示在右下角。 这些控件在给大家带来便利的同时，也可能出现困惑。比如我想把l放在i的后面，我想表格的上下都有p，我想加入自己的控件放在l的后面……这些太多了，那么下面就给大家介绍怎么去使用dom属性配置已经自定义。

上面我已经用了一些英文字母标注在每个控件的后面，开始看肯定会有些疑惑，或者不熟悉，不要着急，我来告诉大家这些到底是什么

作者为了适应我们所说的这些情况，已经考虑到了，所以有这么强大的dom属性。那么作者定义了如下字母：

这些字母你可以理解为一个标签，dt会自动把这些字母替换成相应的控件，就想模板一样。上面的这些元素 l、f、t、i、p、r除了t只能指定一次，其他的均可多次指定。

下面还有两个字母是应用到jQueryUI上的，不过作者推荐在1.10甚至1.11版本中不去使用他，通过使用 jQueryUIOption 来分离开

最后，你也可以添加插件给Datatables，指定新的字母。比如 TableTools 就是添加了 T 来表示。在dom里指定之后，相应的按钮就添加到表格上了

注意：dom的用法可能还不是很简单，希望在1.11版本的计划中更加优化这个参数的使用，让表格定位更简单

---