js怎么设置css高度

藏色散人

发布时间：2021-05-14 10:42:13

3741人浏览过

来源于php中文网

原创

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

js怎么设置css高度

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

js如何给div设置高度?

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

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

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

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

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

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

天意易趣网拍卖系统

前台主要功能：首选服务注销登陆查看使用帮助修改添加登陆帐号拍卖商品管理管理拍卖商品推荐拍卖商品删除特定拍卖已经结束商品拍卖分类管理新闻管理添加文章删除修改栏目管理新闻CSS设定新闻JS生成初始化新闻参数设置用户管理未审核用户管理普通用户管理高级用户管理黄金用户管理管理所有用户数据库管理压缩数据库备份数据库恢复数据库批量处理系统指标测试V1.

下载

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

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

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

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

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

vue2怎么打包es6转es5

2024前端面试题js 2024年高频前端面试题汇总之js篇

nodejs如何执行js文件

nodejs如何运行js文件

nodejs和js语法一样吗

相关标签:

js html5 css css3 html eclipse JS 样式表

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：怎么外部引入css 下一篇：css中margin什么意思

作者最新文章

一文详解通过php+roadrunner实现grpc服务端

2023-04-21 15:57

分享redis多维度排行思路

2023-04-21 16:01

linux jboss是什么

2023-04-23 10:10

linux中yum是什么意思

2023-04-23 10:15

分享一个PHP免费验证码（附代码）

2023-04-23 17:33

详述file_get_contents、getimagesize严重耗时问题

2023-04-23 17:36

用八个demo搞懂Go语言defer的五大特性

2023-04-23 17:40

图文详解如何在Vue项目中集成Ace代码编辑器

2023-04-24 10:52

聊聊前端怎么获取电池信息

2023-04-24 10:55

分享接口设计文档的12个注意点

2023-04-24 10:58

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容，可以阅读本专题下面的文章。

505

2023.10.23

HTML与HTML5的区别

HTML与HTML5的区别：1、html5支持矢量图形，html本身不支持；2、html5中可临时存储数据，html不行；3、html5新增了许多控件；4、html本身不支持音频和视频，html5支持；5、html无法处理不准确的语法，html5能够处理等等。想了解更多HTML与HTML5的相关内容，可以阅读本专题下面的文章。

427

2024.03.06

html5从入门到精通汇总

想系统掌握HTML5开发？本合集精选全网优质学习资源，涵盖免费教程、实战项目、视频课程与权威电子书，从基础语法到高级特性（Canvas、本地存储、响应式布局等）一应俱全，适合零基础小白到进阶开发者，助你高效入门并精通HTML5前端开发。

2025.12.30

html5新老标签汇总

HTML5在2026年持续优化网页语义化与交互体验，不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签，还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

2025.12.30

html5空格代码怎么写

在HTML5中，空格不能直接通过键盘空格键实现，需使用特定代码。本合集详解常用空格写法： （不间断空格）、&ensp;（半个中文空格）、&emsp;（一个中文空格）及CSS的white-space属性等方法，帮助开发者精准控制页面排版，避免因空格失效导致布局错乱，适用于新手入门与实战参考。

2025.12.30

html5怎么做网站教程

想从零开始学做网站？这份《HTML5怎么做网站教程》合集专为新手打造！涵盖HTML5基础语法、页面结构搭建、表单与多媒体嵌入、响应式布局及与CSS3/JavaScript协同开发等核心内容。无需编程基础，手把手教你用纯HTML5创建美观、兼容、移动端友好的现代网页。附实战案例+代码模板，快速上手，轻松迈出Web开发第一步！

153

2025.12.31

HTML5建模教程

想快速掌握HTML5模板搭建？本合集汇集实用HTML5建模教程，从零基础入门到实战开发全覆盖！内容涵盖响应式布局、语义化标签、Canvas绘图、表单验证及移动端适配等核心技能，提供可直接复用的模板结构与代码示例。无需复杂配置，助你高效构建现代网页，轻松上手前端开发！

2025.12.31

html5怎么使用

想快速上手HTML5开发？本合集为你整理最实用的HTML5使用指南！涵盖HTML5基础语法、主流框架（如Bootstrap、Vue、React）集成方法，以及无需安装、直接在线编辑运行的平台推荐（如CodePen、JSFiddle）。无论你是新手还是进阶开发者，都能轻松掌握HTML5网页制作、响应式布局与交互功能开发，零配置开启高效前端编程之旅！

2025.12.31