在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 相关文章推荐
JavaScript 调试器简介
Feb 21 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 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 mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
koa源码中promise的解读
2018/11/13 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
Python ATM功能实现代码实例
2020/03/19 Python
python中字符串的编码与解码详析
2020/12/03 Python
品质管理部岗位职责范文
2014/03/01 职场文书
小学家长评语大全
2014/04/16 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
教师节主持词开场白
2015/05/29 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技