使用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浅谈

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

优质内容筛选与推荐>>
1、文件下载实例
2、第六周作业
3、无线网络不稳定?四大杀手逐一排除 ZT
4、jquery.validate.js
5、正则表达式(regular expression)


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号