在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(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
vue中配置scss全局变量的步骤
Dec 28 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技巧与注意事项分析
2011/02/03 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
教你学会使用Python正则表达式
2017/09/07 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
Django中的用户身份验证示例详解
2019/08/07 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
办公文员的工作岗位职责
2013/11/12 职场文书
结婚邀请函范文
2014/01/14 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
python代码实现备忘录案例讲解
2021/07/26 Python
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers