gpt4 book ai didi

Set Another Column Grid Height To Match Another Column(设置另一柱网轴线高度以匹配另一柱)

转载 作者:bug小助手 更新时间:2023-10-25 18:21:42 26 4
gpt4 key购买 nike



I have:

我有:


HTML:

Html:


<main>
<section id="category">
<div class="icon">About</div>
...
</section>
<section id="about">
<article id="about_info"></article>
...
</section>
</main>

It's CSS:

这是css:


main {
grid-template :
[category-start about-start] "category about" auto [about-end]
[other-start] "..." [category-end other-end]
/ 20% auto;
gap : .5em 0;
margin : 0;
}

main #category {
grid-template-row : var(--about-content-height) auto 5%;
}

I will set --about-content-height dynamically as the height is changing according to whether current view is in grid mode or carousel mode, with:

我将根据当前视图处于网格模式还是旋转木马模式,在高度发生变化时动态设置--About-Content-Height,具体如下:


const main        = document.getElementsByTagName("main");
const mainStyle = getComputedStyle(Array.from(main)[0]);
const mainHeight = mainStyle.height.slice(0, mainStyle.height.length - 2);
const about = document.getElementById("about");
const aboutHeight = about.clientHeight;

const height = Math.round(about / mainHeight * 100);

document.documentElement.style.setProperty('--about-content-height', `${height}%`);

My issue lies in the line:

我的问题在于:


const mainStyle   = getComputedStyle(Array.from(main)[0]);

and


const mainHeight  = mainStyle.height.slice(0, mainStyle.height.length - 2);

There is difference between console.log(mainStyle) and console.log(mainStyle.height).
The correct one was within mainStyle by itself. But it's value started to be different in mainStyle.height.

Console.log(MainStyle)和console.log(mainStyle.Height)是有区别的。正确的版本本身就在mainStyle中。但它的价值在mainStyle.Height中开始不同了。


Here're the values of both the console:
mainStyle by itself
mainStyle.height

以下是这两个控制台的值:


Why is there a difference between them?

为什么它们之间有区别呢?


Update


So it basically is the difference between loading of the content.

所以这基本上就是内容加载之间的区别。


setTimeout(() => {
this.myFunction();
}, 300);

will give me the right height. window.onload or readyState === "complete" doesn't do anything.

会给我合适的身高。OnLoad或ReadyState=“Complete”不执行任何操作。


Edit


Is there any way to not use the setTimeout but to relies on the DOM finishing whatever is happening on it?

有没有办法不使用setTimeout,而是依赖于DOM来完成它上发生的任何事情?


Thanks for your answer in advance.

谢谢你提前给我答复。


更多回答
优秀答案推荐
更多回答

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com