【React工作记录四十二】获取页面的可视化高度和宽度

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

导语

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




编辑


解决思路

<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())

总结

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

相关文章
|
3月前
|
存储 前端开发 JavaScript
react怎么实现跨页面传参
react怎么实现跨页面传参
47 2
|
4月前
|
前端开发 数据可视化 JavaScript
【第50期】一文读懂React可视化
【第50期】一文读懂React可视化
44 0
|
4月前
|
资源调度 JavaScript 前端开发
React-Router 5.0 制作导航栏+页面参数传递
React-Router 5.0 制作导航栏+页面参数传递
24 0
|
12天前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。
|
25天前
|
前端开发
探索React页面导航:不只有React Router
探索React页面导航:不只有React Router
|
5月前
|
JavaScript 前端开发
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)...
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)...
45 0
|
5月前
|
JavaScript 前端开发
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)
32 0
|
5月前
|
前端开发
写一个react 的页面 录像组件
写一个react 的页面 录像组件
24 0
|
5月前
|
前端开发 CDN
在单html页面中使用react并配置jsx
在单html页面中使用react并配置jsx
32 0
|
4月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
116 0