在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现实多行信息
Aug 26 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
详解如何在Angular中快速定位DOM元素
May 17 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 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 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
写的htc的数据表格
2007/01/20 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python脚本实现虾米网签到功能
2016/04/12 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
python中round函数保留两位小数的方法
2020/12/04 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
法国体育用品商店:GO Sport
2019/10/23 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
代理协议书范本
2014/04/22 职场文书
特教教师先进事迹
2014/05/21 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript