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的直接后代。但是，您应该使用＆lt; hr /＆gt;而不是使用＆lt; section＆gt; -element，或者更好地为#nav设置一个简单的border-bottom。

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

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

3 个答案: