我的编程空间,编程开发者的网络收藏夹
学习永远不晚

在js中修改html body的样式

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

在js中修改html body的样式

一、原始定义

先在css中定义:body, html 宽高为300px


body, html {
   width: 300px;
   height: 300px;
}

二、js操作,以修改宽度为例


// 获取body、html节点style(主要是这里html,一开始不清楚获取方式)
let bodyStyle = document.body.style
let htmlStyle = document.getElementsByTagName('html')[0].style

// 获取浏览器的宽度,width 也可以设置为任意值
let width = document.documentElement.clientWidth || document.body.clientWidth

// 重置body宽度
bodyStyle.width = `${width}px`

// 重置html宽度
htmlStyle.width = `${width}px`

// 或者其他样式的修改,如:
htmlStyle['min-width'] = `${width}px`

三、效果:宽度已被修改

到此这篇关于在js中修改html body的样式的文章就介绍到这了,更多相关js中修改html body的样式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

在js中修改html body的样式

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

在js中修改html body的样式是什么

这期内容当中小编将会给大家带来有关在js中修改html body的样式是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。一、原始定义先在css中定义:body, html 宽高为300pxbody, h
2023-06-25

怎么在html中修改日期样式

今天就跟大家聊聊有关怎么在html中修改日期样式,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。在html中,可以使用“::-webkit-datetime-edit”伪元素选择器来修
2023-06-15

怎么修改el-select的样式:popper-append-to-body和popper-class

小编给大家分享一下怎么修改el-select的样式:popper-append-to-body和popper-class,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下
2023-06-08

如何在ExtJS中修改CSS样式

ExtJS 是一款功能强大的 JavaScript 库,旨在简化 Web 应用程序的开发。在使用 ExtJS 进行开发时,我们往往需要对 CSS 样式进行定制化以满足业务需求。本文将介绍如何在 ExtJS 中修改 CSS 样式。一、了解 ExtJS 使用的 CSS在使用 ExtJS 开发时,我们需要引入 ExtJS 的 CSS 文件。在使用命令行工具创建 ExtJS 项目时,会
2023-05-14

怎么在css中修改滚动条样式

这期内容当中小编将会给大家带来有关怎么在css中修改滚动条样式,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。CSS设置代码:*{scrollbar-face-color:#fff; s
2023-06-14

如何在css中修改滚动条样式

如何在css中修改滚动条样式?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。css的三种引入方式1.行内样式,最直接最简单的一种,直接对HTML标签使用style=""。2.
2023-06-08

在PyCharm中如何修改字体大小和样式

如何在PyCharm中调整字体大小和样式,需要具体代码示例在日常的编程工作中,我们经常会使用到各种集成开发环境(IDE)来进行代码编写、调试和管理。PyCharm作为一款功能强大的Python开发IDE,提供了许多个性化的设置,其中包括调
在PyCharm中如何修改字体大小和样式
2024-02-02

在html中怎么修改无序列表ul和li的格式

这篇文章主要为大家展示了“在html中怎么修改无序列表ul和li的格式”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“在html中怎么修改无序列表ul和li的格式”这篇文章吧。1、去掉默认情况下前
2023-06-27

CSS伪类修改input选中样式的方法

这篇文章将为大家详细讲解有关CSS伪类修改input选中样式的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。注:该表引自W3School教程伪元素的分类及作用:下面通过代码看下CSS 伪类修改inpu
2023-06-08

在Vue中使用deep深度选择器修改elementUI组件的样式

这篇文章主要介绍了在Vue中使用deep深度选择器修改elementUI组件的样式,本文分为两种方法给大家介绍,在这小编比较推荐使用第二种使用deep深度选择器,感兴趣的朋友跟随小编一起看看吧
2022-12-08

DedeCMS新建模型字段中【附件样式】的修改方法

本文实例讲述了Dedecms新建模型字段【附件样式】修改方法。分享给大家供大家参考。具体实现方法如下: 当我们在系统模型中添加了一个自定义附件类型字段的时候,例如我在后台添加一个名为"fujian"的附件类型的字段,字段的实编程客栈际内容为
2022-06-12

小程序之修改引用的vant组件样式(包括自定义组件中的vant样式)

今天在写小程序的时候,刚好遇到,以前遇到解决了之后忘记记录,今天记录下! 一般组件的基础样式会跟ui设计稿有些出入,就得改动! 使用vant的话,官方就有提供方法,比如复选框 我在项目中用custom-class居多,设置根节点后就
2023-08-19

Element UI/Plus中全局修改el-table默认样式的解决方案

elementui官方封装好的el-table组件,好用是挺好用的,但不可避免的是默认的样式,下面这篇文章主要给大家介绍了关于Element UI/Plus中全局修改el-table默认样式的解决方案,需要的朋友可以参考下
2023-02-18

编程热搜

目录