在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 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
详解webpack loader和plugin编写
Oct 12 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
PHP 代码规范小结
2012/03/08 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
js右键菜单效果代码
2007/07/21 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
angularJS开发注意事项
2018/05/26 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python学生管理系统学习笔记
2019/03/19 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
生产文员岗位职责
2014/04/05 职场文书
民族学专业求职信
2014/07/28 职场文书
十佳青年事迹材料
2014/08/21 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
宣传委员竞选稿
2015/11/19 职场文书