javascript - 如何获得全高?
问题描述
我正在尝试获取页面的完整高度以将其应用于样式,特别是应用于darkMask
类。
我需要高度,因为当我在标题内执行操作时,除了调用操作后出现的元素之外,整个页面都会应用一个深色层。
现在,由于 useRef 钩子,我得到了高度,我把它放到了容器中,但这并没有给我完整的高度
import { useContext, useState, useRef, useEffect } from 'react';
import { useRouter } from 'next/router';
import { Header } from '../Header';
import { SearchToggleContext } from '../../contexts/SearchToggleContext';
import styles, { globalStyles } from './styles';
export const Layout = ({ children }) => {
const [height, setHeight] = useState();
const mainContainer = useRef(null);
const { isOpenSearch } = useContext(SearchToggleContext);
const router = useRouter();
useEffect(() => {
if (mainContainer.current) {
setHeight(mainContainer.current.offsetHeight);
}
}, [router]);
return (
<>
<div className='darkMask' />
<Header />
<main ref={mainContainer}>{children}</main>
<style jsx global>
{globalStyles}
</style>
<style jsx>{styles}</style>
<style jsx>{`
.darkMask {
display: ${isOpenSearch ? 'block' : 'none'};
height: ${height}px;
}
`}</style>
</>
);
};
/* Styles of layout */
import css from 'styled-jsx/css';
export const globalStyles = css.global`
html,
body {
height: 100%;
width: 100%;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.navbarItem {
margin-right: 2em;
}
`;
export default css`
main {
height: calc(100vh - 80px);
width: 100%;
top: 80px;
position: absolute;
}
.darkMask {
position: relative;
z-index: 4;
width: 100%;
top: 80px;
position: absolute;
background-color: rgba(45, 45, 45, 0.9);
}
`;
/* _app.js file */
import { Layout } from '../components/Layout';
import { SearchToggleContextProvider } from '../contexts/SearchToggleContext';
function MyApp({ Component, pageProps }) {
return (
<>
<SearchToggleContextProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</SearchToggleContextProvider>
</>
);
}
export default MyApp;
解决方案
您可以使用document.body.offsetHeight
获取整个<body>
元素的高度。
const { useState, useEffect } = React;
function App() {
const [height, setHeight] = useState(null);
const [count, setCount] = useState(0);
useEffect(() => {
setHeight(document.body.offsetHeight);
}, [count]);
const elements = [];
for (let i = 0; i < count; i++) {
elements.push(<p key={i}>{`Element ${i}`}</p>);
}
return (
<div className="App">
<span>{`Document height: ${height} px`}</span>
<div>
<button onClick={() => setCount(count + 1)}>Add element</button>
{elements}
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
推荐阅读
- css - 自定义引导视频轮播错误下一个和上一个控件阻止轮播中视频的视频控件
- python - 关于使用 string.replace 和 regex 清理数据的问题
- docker - 如何在 nginx 容器中将环境变量与 lua 一起使用
- vue.js - 如何切换表中具有相同值的多行?
- python - 如何为 pos 增加价值?
- php - 删除 Hello Dolly 实际上会破坏我的 Wordpress 网站
- reactjs - React Ref's Deprecated - 什么是替代品?
- bash - Bash 变量编号按升序排列
- javascript - 如何将谷歌字体中的草书字体(字体名称中带有空格)包含到画布元素中
- laravel - 在 laravel 上使用本地 google 字体出现错误 404