在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不同页面传值的改进版
Sep 30 Javascript
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
vue计算属性及使用详解
Apr 02 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
用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 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
PHP内置加密函数详解
2016/11/20 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
jquery.validate使用详解
2016/06/02 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
Three.js基础学习教程
2017/11/16 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python 解析XML文件
2009/04/15 Python
Python之父谈Python的未来形式
2016/07/01 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
Python文件的读写和异常代码示例
2017/10/31 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
详解python中的Turtle函数库
2018/11/19 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
python db类用法说明
2020/07/07 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
优秀教师事迹简介
2014/02/02 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
yolov5返回坐标的方法实例
2022/03/17 Python
Elasticsearch 聚合查询和排序
2022/04/19 Python
速龙x4-860k处理器相当于i几
2022/04/20 数码科技