在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 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 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 调用远程url的六种方法小结
2009/11/02 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
10条php编程小技巧
2015/07/07 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
python实现外卖信息管理系统
2018/01/11 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
Django框架验证码用法实例分析
2019/05/10 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
数据库面试要点基本概念
2013/10/31 面试题
通信工程专业女生个人求职信
2013/09/21 职场文书
应届生简历自我评价
2015/03/11 职场文书
《学会看病》教学反思
2016/02/17 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
详解TypeScript的基础类型
2022/02/18 Javascript
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技