在js中修改html body的样式


Posted in Javascript onNovember 11, 2021

 

一、原始定义

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

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

在js中修改html body的样式

二、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的样式的文章就介绍到这了,更多相关js中修改html body的样式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
用JS创建一个录屏功能
JavaScript数组 几个常用方法总结
Nov 11 #Javascript
JavaScript 事件捕获冒泡与捕获详情
JavaScript 定时器详情
Nov 11 #Javascript
使用javascript解析二维码的三种方式
Nov 11 #Javascript
实现一个简单得数据响应系统
Nov 11 #Javascript
JavaScript函数柯里化
Nov 07 #Javascript
You might like
PHP中函数内引用全局变量的方法
2008/10/20 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
php单一接口的实现方法
2015/06/20 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
pytorch 模型可视化的例子
2019/08/17 Python
python基础 range的用法解析
2019/08/23 Python
Python实现手势识别
2020/10/21 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
应届生保险求职信
2013/11/11 职场文书
理工科学生的自我评价
2013/12/15 职场文书
农村门前三包责任书
2014/07/25 职场文书
英语课外活动总结
2014/08/27 职场文书
教师节祝酒词
2015/08/11 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
Java死锁的排查
2022/05/11 Java/Android