js如何改变css样式


本文摘自PHP中文网,作者coldplay.xixi,侵删。

js改变css样式的方法:1、使用cssText方法;2、使用【setProperty()】方法;3、使用css属性对应的style属性。

本教程操作环境:windows7系统、css3版,DELL G3电脑。

js改变css样式的方法:

第一种:用cssText

1

div.style.cssText='width:600px;height:250px;border:1px red solid;text-align: center;line-height: 250px;';

第二种:用setProperty()

1

2

3

4

5

6

7

div.style.setProperty('width','700px');

div.style.setProperty('height','300px');

div.style.setProperty('line-height','300px');

div.style.setProperty('background','#f00');

div.style.setProperty('color','#fff');

div.style.setProperty('border','1px solid blue');

div.style.setProperty('text-align','center');

第三种:使用css属性对应的style属性

1

2

3

4

5

6

7

div.style.width = "800px";

div.style.height = "250px";

div.style.lineHeight = "250px";

div.style.background = "#000";

div.style.color = "#fff";

div.style.border = "1px solid #111";

div.style.textAlign = "center";

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<body>

        <div id="div">这是一个盒子</div>

        <script type="text/javascript">

            var div = document.getElementById("div");

             

            //第一种:用cssText

            div.style.cssText='width:600px;height:250px;border:1px red solid;text-align: center;line-height: 250px;';

             

            //第二种:用setProperty()

            div.style.setProperty('width','700px');

            div.style.setProperty('height','300px');

            div.style.setProperty('line-height','300px');

            div.style.setProperty('background','#f00');

            div.style.setProperty('color','#fff');

            div.style.setProperty('border','1px solid blue');

            div.style.setProperty('text-align','center');

             

            //第三种:使用css属性对应的style属性

            div.style.width = "800px";

            div.style.height = "250px";

            div.style.lineHeight = "250px";

            div.style.background = "#000";

            div.style.color = "#fff";

            div.style.border = "1px solid #111";

            div.style.textAlign = "center";

        </script>

    </body>

相关教程推荐:CSS视频教程

以上就是js如何改变css样式的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

js中输出的方式有哪些

同源策略是什么意思

如何内联css样式

怎么给html添加js

js怎么清除定时器

js 中 onchange 事件如何使用?

js中的typeof和instanceof和===的区别

js实现正则表达式验证端口范围的方法

10款好看且实用的文字动画特效,让你的页面更吸引人!

js如何修改css

更多相关阅读请进入《js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...