使用JS动态改变元素样式

   今天写了个小网页，需要使用JS动态改变元素样式，结果很多麻烦，从网上找了一些解决办法总算搞定。总结一下

   改变样式有三种办法，xxx.style.styleName ,xxx.style.cssText,和xxx.className

   光文字不好说啊，还是举栗子吧

   假定var mydiv=document.getElementById("div1");

　第一种 mydiv.style.width="400px"，但是这种方式局限在行内样式，它是通过改变行内的style来改变的。与<style></style>中的样式无关，如果没有在行内style没有写width，那这种方法是无效的。

  第二种 mydiv.style.cssText="width:400px;height:200px"   可以批量改动样式

  第三种  mydiv.className="mystyle1" 需要在头部style中或者外部文件中先写好一个样式，然后动态地设置一个元素的样式。可以批量设置，我认为这种方式最好（如果积累的css库中有适用的，那岂不是乐坏了），不过网页很小的话就没这个必要。需要注意的是在某些浏览器下不是className，而是mydiv.class="*****",不是通用的。

　另外通过改变css可以改变整个网页的样式，可以做网页模板。

  cssText是我今天才学到的，也是随意总结一下。关于设置样式有篇写得比较全面博客  JS修改css样式style浅谈

  （突然感到写博客压力山大啊，虽然只是一篇短短的渣文也要花很多时间，构思搜集等等。膜拜顶级博主…）

转载于:https://www.cnblogs.com/CHSelf/p/3427367.html