在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 相关文章推荐
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 Javascript
详解Vue的options
May 15 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来自动调用不同服务器上的flash
2006/10/09 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
全面了解js中的script标签
2016/07/04 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
浅谈Python基础之I/O模型
2017/05/11 Python
Python自定义简单图轴简单实例
2018/01/08 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
pandas 层次化索引的实现方法
2019/07/06 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
pymysql的简单封装代码实例
2020/01/08 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
职业生涯规划设计步骤
2014/01/12 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
如何写通讯稿
2015/07/22 职场文书
公司酒会致辞
2015/07/30 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
mysql 排序失效
2022/05/20 MySQL