javascript - 如何使用 LESS 获取任何元素的高度?

标签 javascript jquery html css less

如何使用 LESS 获取任何元素的高度?

<html>
<head>
<title></title>

<style>

    html, body {
        height: 100%;
    }

    header {
        height: auto;
        text-align: center;
        background: red;
    }

    @windowHeight: `$(window).height()`;
    @headerHeight: `$('header').height()`; /* NOT WORKING */

    @sectionHeight: @windowHeight - @headerHeight;

    section {
        height: ~'@{sectionHeight}px';
        text-align: center;
        background: green;
    }

</style>

</head>
<body>

    <header>TITLE<header>

    <section>TEXT</section>

</body>
</html>

如何使用 LESS 获取任何元素的高度?

示例,如果我设置 <header> height = 100px , 那么这段代码就可以工作了

最佳答案

由于 LESS 在 CSS 被浏览器传递和解释之前处理您的样式,因此您无法让它在此之后进行数学运算。所需的信息稍后呈现,因此您必须包含一个 JS 以在加载后修改 DOM,或者让 JS 首先构建该部分。

关于javascript - 如何使用 LESS 获取任何元素的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25136500/

相关文章:

javascript - 如何在 HTML 中使用 Javascript 使用单选按钮隐藏表格?

javascript - 克隆音频源而无需再次下载

html - 打破 <li> 的 margin-bottom 的简单 css 示例,我不知道为什么

javascript - jQuery 用于单击一个淡出一个 div 然后淡入另一个 div 然后反向执行的按钮

javascript - 如何在epub阅读器中实现 'page break'

javascript - 如何在react front中显示 Node 数组

javascript - Jquery替换特定字符组合

javascript - 用javascript插入div

jquery - 灯箱YouTube影片

javascript - jquery/js/html 叠加按钮