在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写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 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传递数组的方法
2015/02/11 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
使用python3.5仿微软记事本notepad
2016/06/15 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
怎么样写好简历中的自我评价
2013/10/25 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
绵山导游词
2015/02/05 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript