在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 的 prototype问题。
Jan 03 Javascript
Javascript 写的简单进度条控件
Jan 22 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
类和原型的设计模式之复制与委托差异
Jul 07 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
从刷票了解获得客户端IP的方法
2015/09/21 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
PHP实现八皇后算法
2019/05/06 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
如何解决vue在ios微信"复制链接"功能问题
2020/03/26 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
Python中bisect的用法
2014/09/23 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python中格式化format()方法详解
2017/04/01 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
劳资人员岗位职责
2013/12/19 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
师范大学生求职信
2014/06/13 职场文书
超市周年庆活动方案
2014/08/16 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS