微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 JavaScript 后端开发 数据库 移动端 运维开发 UI设计 计算机基础 XML Web Services
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > web前端 > js教程 > 正文

javascript如何给div设置高度

coldplay.xixi
发布： 2021-04-08 13:38:07
原创
13359人浏览过
javascript给div设置高度的方法：首先新建项目；然后修改html文件中div的style中值来修改div的高度；最后运行项目即可。

javascript如何给div设置高度

本教程操作环境：windows7系统、javascript1.8.5版，DELL G3电脑。

javascript给div设置高度的方法：

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

9487cac015fcba4157b517318055c6a.png

立即学习“Java免费学习笔记（深入）”；

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

2711b11128e65873177b4b88dbe4edf.png

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

9f6ce923d49ca6e32edb87f6f12f6ea.png

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

b00d95072a5026b9b43ddcef8d4d3ba.png

百度·度咔剪辑
百度·度咔剪辑

度咔剪辑，百度旗下独立视频剪辑App

百度·度咔剪辑3
查看详情 百度·度咔剪辑

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

2b6173feb59128245fe06b0f3d03637.png

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

e63434fe3eea35095ecdb9d4161231d.png

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

72f2b1275f856f6514c11249bfbf248.png

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

b778a9d66051dfac5e7c75a9897f926.png

相关免费学习推荐：javascript视频教程

以上就是javascript如何给div设置高度的详细内容，更多请关注php中文网其它相关文章！

相关标签：
javascript

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：Angular怎么刷新当前页面？方法介绍 下一篇：JavaScript怎么拆分数组项
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
JavaScript 本地存储：localStorage 与 sessionStorage 的区别 localStorage数据持久存储，除非手动清除；sessionStorage仅在会话期间有效，关闭标签页即清除。2.两者均基于源隔离，但localStorage同源页面共享，sessionStorage每标签页独立。3.操作方法相同，均需字符串存储，对象需JSON转换。4.localStorage适用于长期保存用户偏好，sessionStorage适合临时保存表单或会话数据。
2025-11-03 08:04:02
332
JS实现动态导入与按需加载模块_javascript技巧 动态导入通过import()函数实现按需加载，结合路由懒加载、预加载和错误处理，可有效优化大型前端项目性能，提升用户体验。
2025-11-03 07:27:19
353
前端实现记住密码与自动填充_javascript技巧 正确使用表单标签与属性、支持“记住我”功能、避免破坏自动填充机制、测试浏览器兼容性可实现稳定自动填充。1.使用标准input类型并设置autocomplete属性为username和current-password；2.登录成功后通过localStorage保存用户名，页面加载时恢复；3.避免动态修改type、禁用autocomplete或使用非原生输入框；4.在Chrome、Firefox、Safari中测试自动填充与多账号切换效果，确保兼容性。
2025-11-03 06:09:33
229
JavaScript与SpringBoot应用监控集成的详细教程 首先明确监控目标，涵盖前端错误、性能、行为与后端接口、JVM、异常等，并实现关联分析；接着通过JavaScript捕获全局错误、Promise异常、API请求耗时及页面性能指标并上报；SpringBoot使用Actuator与Micrometer暴露监控数据，记录自定义指标；通过Prometheus抓取后端指标，Grafana统一展示，结合TraceID关联调用链；前端日志经HTTP发送至后端，可集成ELK或Loki；最后实施节流、脱敏、限流与HTTPS保障安全与性能。
2025-11-03 06:03:18
591
JS函数如何定义静态函数_JS静态函数定义与类方法使用案例 JavaScript中的静态函数是挂载在函数或类上的方法，无需实例化即可调用。通过函数属性或ES6的static关键字实现，用于工具函数、工厂模式等场景，如MathUtils.add或Validator.isEmail，区别于需实例调用的原型方法。
2025-11-03 04:31:25
683
JavaScript中的尾调用优化与递归_javascript性能 尾调用优化通过重用栈帧避免递归时的栈溢出。当函数最后一步调用自身且返回其结果时，如阶乘函数factorial(n,acc)在n≤1时返回acc，否则递归调用factorial(n-1,n*acc)，此时可进行优化，但JavaScript中仅部分引擎支持。
2025-11-03 03:33:35
314
JavaScript 字符串搜索：indexOf, includes 与 startsWith 的使用 indexOf返回索引，includes判断包含，startsWith检查开头。根据需求选择：需位置用indexOf，判断存在用includes，验证前缀用startsWith。
2025-11-03 02:57:15
516
JavaScript 数组判断：Array.isArray() 与 instanceof 的区别 Array.isArray()是判断数组的首选方法，因它跨环境安全且结果准确；而instanceof依赖原型链，在多全局环境下可能失效，适用于单一上下文场景。
2025-11-03 02:47:31
126
JavaScript中的设计模式：单例、观察者模式等_js编程思想 单例模式确保类仅有一个实例并提供全局访问点，适用于配置管理、日志记录等场景，JavaScript中通过闭包和静态方法实现；观察者模式建立一对多依赖关系，状态变化时自动通知所有观察者，常用于事件系统和组件通信，通过Subject和Observer类实现松耦合。
2025-11-03 01:39:09
733
JS插件如何实现模块化_JS插件模块化开发方法与最佳实践 采用ES6模块化规范可提升JS插件的可维护性与复用性，通过合理拆分功能模块、设计可配置接口并结合构建工具打包发布，实现高效协作与多环境兼容。
2025-11-03 01:13:16
273
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部