通过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节点

我们知道，在HTML中每个元素都是可以有class属性来设置样式的，这种样式是从.css文件中加载的。如果我们想要修改的效果是这种比较全局性的样式的话，上面的办法可能就不太试用了。解铃还须系铃人嘛，.css文件的问题就让她自己来解决吧。 和js文件一样，除了写死在源代码中静态加载之外还是可以根据实际需要来动态加载的（哈，这有点像Java中的反射或者C语言中神奇的指针吧）。 要想实现这样的效果，当然是需要在HTML中动态添加一个link节点了： var page_div = document.getElementById('page'); var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'test.css'; page_div.appendChild(link); 至于test.css文件的内容，自己随便写喽。

• 参考

这里有另外一篇文章，介绍如何通过Js来修改页面元素。 http://www.w3school.com.cn/jsref/dom_obj_style.asp

转载于:https://my.oschina.net/surenpi/blog/816818