一、原始定义

先在css中定义：body, html 宽高为300px

body, html {
   width: 300px;
   height: 300px;
}

二、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`

三、效果：宽度已被修改

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Node.js中进行压缩数据的操作过程是什么

  这篇文章介绍了Node.js实现压缩与解压数据的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• 基于Vue框架如何实现放大镜，原理和方法是什么

  这篇文章主要介绍了Vue3.0 自己实现放大镜效果案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

• 小程序怎样实现轮播图圆点组件，代码是什么

  本文实例为大家分享了小程序自定义轮播图圆点组件的具体代码，供大家参考，具体内容如下微信小程序自带的轮播图小点，是一个圆点且在图片上展示，不美观。上图为自定义后的轮播图效果代码如下：wxhtml：!-- 轮播图 --    view class=lbt      swiper class=banner-list styl

• vue封装方式有哪些，如何确定需要封装

  因为现在vue的流行,vue的各种插件都出来了,我们公司也是使用vue做项目，那么应该如何封装，本文就介绍一下如何封装，感兴趣的可以了解一下

• vuex中刷新数据消失的问题怎样处理?

  这篇文章给大家分享的是vuex中刷新数据消失的问题的解决方法，下文有具体的问题分析、解决思路及方法，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。