javascript - 如何使 1 个 css 值依赖于另一个？

Question

我正在尝试制作包含三个部分的页眉。 (所有部分都水平排列)我希望中间部分根据其中内容(文本)的大小进行调整。当我调整这个中间大小时，我希望其他两个相应地进行调整，以便三个部分始终占据网站的整个宽度并保持均匀。我的网站宽度是 1000px，我是这样设置的

< div .side_header>  < div #header>   < div .side_header>

我想制作一个脚本，内容大致如下: “.side_header 的宽度等于(1000px 减去#header 的宽度)*.5” 这是我写的，但我的语法不对:

<script>
    $(document).ready(function () {
        $(".side_header").css("width", "$("#header_text").css("width") * .5");  
    })
</script>

CSS:

        #title{

        }

        .side_header{
            display:inline-block;
            background-color:#999;
        }

        #header_text{
            display:inline-block;
            background-color:#3FF;
        }

html:

        <div id="title">
            <div class="side_header">&nbsp;</div>
            <div id="header_text"> Header text</div>
            <div class="side_header">&nbsp;</div>
        </div>

决议: 使用 javascript 制作依赖值可能会很麻烦，并且很容易导致错误。最好使用像 .less 或 .sass 这样的 css 处理器

Answer 1

您正在尝试将宽度设置为字符串。尝试

<script>
$(document).ready(function () {
    $(".side_header").css("width", ($(document).css("width") - $("#header_text").css("width")) * .5);  
})
</script>