当前位置:Gxlcms > 前端框架 > js怎么设置css高度

js怎么设置css高度

时间:2021-07-01 10:21:17 帮助过:52人阅读

js设置css高度的方法:1、通过js修改html文件中div的style中值来修改div的高度;2、使用js修改CSS文件中的div的height的值。

本文操作环境:Windows7系统、javascript1.8.5&&HTML5&&CSS3版、Dell G3电脑。

js如何给div设置高度?

首先打开我们测试的编辑工具 我这里使用的是Eclipse

我们新建一个测试项目然后新建一个index.html、basic.js和basic.css文件

a716d933a0a58cf55873aa0b7a3ed35.png

第一种方法是js修改html文件中div的style中值来修改div的高度 HTML文件中的文件代码如图所示

9b094da12090344d4e09ab4f661212f.png

运行之后我们看到两个div的高度是一样的 接下来我们就使用js修改高度

a9267dbece18146cbbca9b93523c941.png

这时我们敲js中的代码 获取div1的id 使用css属性对应的style属性然后设置高度 如图所示

0f5987d0870bdd683fc050f1981f5cd.png

第二种方法是使用js修改CSS文件中的div的height的值 HTML文件中的代码如图所示

3cdf09e25474adcb9073394a67c5164.png

样式表css文件中的代码如图所示 运行项目之后 你会看到两个div的高度是一样的 这里就不测试了

1a4b9d8c1c753245a7689c1a87f8bbb.png

然后我们是在js文件中获取div1的id属性 然后使用obj.style.cssTest来修改嵌入式的css

492b9705399458bf22b095efaf61415.png

然后运行项目之后 两次结果都是一样的 div的高度改变了

cb6876f46bc7b165b7ff7db6ecf2b30.png

推荐学习:《css视频教程》

以上就是js怎么设置css高度的详细内容,更多请关注gxlcms其它相关文章!

人气教程排行