js 动态改变根元素rem大小

阅读 125

2023-02-14


效果

js 动态改变根元素rem大小_reactjs

以react 为例

逻辑

const eStyle = useRef<HTMLElement>(document.createElement("style"));
const eHead = useMemo<HTMLHeadElement | null>(
() => document.querySelector("head"),
[]
);

const handleChangeRem = useCallback(() => {
eStyle.current.innerHTML = `
html {
font-size : 200% !important;
}
`;
eHead?.appendChild(eStyle.current);
}, [eHead]);

const handleReductionRem = useCallback(() => {
eHead?.removeChild(eStyle.current);
}, [eHead]);

import { FC, ReactElement, useCallback, useMemo, useRef } from "react";
import { Button, CenterBox } from "../../components/BUI";

interface IProps {}

const Mongo: FC<IProps> = (): ReactElement => {
const eStyle = useRef<HTMLElement>(document.createElement("style"));
const eHead = useMemo<HTMLHeadElement | null>(
() => document.querySelector("head"),
[]
);

const handleChangeRem = useCallback(() => {
eStyle.current.innerHTML = `
html {
font-size : 200% !important;
}
`;
eHead?.appendChild(eStyle.current);
}, [eHead]);

const handleReductionRem = useCallback(() => {
eHead?.removeChild(eStyle.current);
}, [eHead]);

return (
<CenterBox>
<Button margin onClick={handleChangeRem}>change REM</Button>
<Button onClick={handleReductionRem}>Reduction REM</Button>
</CenterBox>
);
};

export default Mongo;


精彩评论(0)

0 0 举报