通过Js来设置页面样式

• 介绍

我们可以在编辑HTML源码的时候将CSS样式写死到.css文件或者HTML元素的style属性中，但又时候可能会需要动态地来修改某个元素的样式。

我这里介绍两种方式：修改HTML元素的style属性、动态加载link节点。

• style属性

在使用各种框架之前，必须要知道原生的Js到底是怎么写的。这里最直接的办法就是：

document.getElementById('content').style = 'margin-left:0px;position:absolute;';

上面的代码给id为content的元素添加了两个CSS样式，都是key-value的形式，以分号（;)分割。这样的代码在Firefox浏览器中是没问题的，但可能在IE和Chrome中无效，下面介绍另一种方法：

var content = document.getElementById('content');
content.style.marginLeft = '0px';
content.style.position = 'absolute';

可以看到这种办法要稍微麻烦点，但没关系，如果内容很多的话我们依然是可以使用循环来搞定（谁让我们程序员都是懒人呢）。另外，要注意的是，这里的CSS属性名和直接在.css文件中的写法稍微有点不同，例如：.css文件中的margin-left在这里就需要写成marginLeft，取消中划线（-)，用大写字母来代替。

• link节点

• 参考

这里有另外一篇文章，介绍如何通过Js来修改页面元素。

​​http://www.w3school.com.cn/jsref/dom_obj_style.asp​​​