#yyds干货盘点# 【React工作记录四十二】获取页面的可视化高度和宽度

简介: #yyds干货盘点# 【React工作记录四十二】获取页面的可视化高度和宽度

前言


我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语


歌谣 歌谣 我们需要获取页面的一个可视化宽度和高度怎么做呢


图片.png

解决思路


<div>
    我是歌谣
  </div>
  <script>
// 获取展示内容宽度,去掉sider
 function getContentWidth () {
  const contentWidth = document.documentElement.clientWidth ||
 document.body.clientWidth;
  return contentWidth
};
// 获取展示内容高度
function getContentHeight () {
  const contentHeight = document.documentElement.clientHeight 
|| document.body.clientHeight;
  return contentHeight;
};
console.log("宽度"+getContentWidth())
console.log("高度"+getContentHeight())


总结


最好的种树是十年前 其次是现在 欢迎一起学习与交流




相关文章
|
5月前
|
存储 前端开发 JavaScript
react怎么实现跨页面传参
react怎么实现跨页面传参
169 2
|
5月前
|
前端开发 数据可视化 JavaScript
【第50期】一文读懂React可视化
【第50期】一文读懂React可视化
85 0
|
1月前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
98 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
5月前
|
资源调度 JavaScript 前端开发
React-Router 5.0 制作导航栏+页面参数传递
React-Router 5.0 制作导航栏+页面参数传递
48 0
|
1月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
50 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
1月前
|
前端开发
React页面跳转取消上一个页面的所有请求
React页面跳转时取消上一个页面的所有axios请求,通过axios拦截器设置cancelToken,并在页面跳转时调用cancel函数取消未完成的请求。
15 2
|
1月前
|
前端开发 JavaScript
React配合axios请求拦截校验session,403跳转至登陆页面
React中使用axios进行请求拦截,通过自定义事件监听和响应拦截实现403状态码时的自动登录页面跳转。
42 2
|
5月前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。
|
5月前
|
前端开发
探索React页面导航:不只有React Router
探索React页面导航:不只有React Router
|
5月前
|
JavaScript 前端开发
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)...
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)...
85 0