如何根据另一个部分的计算宽度设置一个部分的宽度？

Question

尝试这样做，但这是错误的吗？下面是我尝试加载的样式、脚本和 html。

<style>
#bar {
    background:black;
    width:  </style><script>var barWidth = getElementByID("nav").style.width; document.write (nav);</script><style>
    height: 5px;
}
</style>

<section id="nav">
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
    <span id="loginButton"><a href="#">Login</a></span>
    <section id="bar"></section>    
</section>

Answer 1

您不能将 script 标记嵌套在 style 标记内。以下将实现您想要的行为......

<style>
    #bar {
        background:black;
        height: 5px;
    }
</style>


<section id="nav">
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
    <span id="loginButton"><a href="#">Login</a></span>
    <section id="bar"></section>    
</section>


<script>
    var barWidth = getElementByID("nav").style.width;
    getElementById('bar').style.width = barWidth;
</script>

Answer 2

嗯，是的，你不能那样做... script 和 style 不像 PHP 或 ASP 之类的切换。

但是，您应该为此使用 js。如果将 #bar 设置为块级元素，默认情况下它将是 #nav 的宽度：

#nav { width: 300px; }

#bar {
    background:black;
    display: block;
    height: 5px;
}

Answer 3

在您的示例中，它只是 width:100% 因为 #bar 是 #nav 的直接后代。但是，您应该使用

---

，而不是使用

元素，或者最好为 #nav 放置一个简单的边框底部。

“如何动态设置CSS规则？”这个问题的答案可以在文章Totally Pwn CSS with Javascript中找到。不要使用此解决方案来解决您的问题。