在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 div 弹出可拖动窗口
Feb 26 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 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如何将日志写进syslog
2013/06/28 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
使用Python对MySQL数据操作
2017/04/06 Python
python删除字符串中指定字符的方法
2018/08/13 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
extern在函数声明中是什么意思
2014/01/19 面试题
打造高效课堂实施方案
2014/03/22 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
JavaScript组合继承详解
2021/11/07 Javascript
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android
Python实现聚类K-means算法详解
2022/07/15 Python