如何根据另一节的计算宽度设置节的宽度？

试图做到这一点，但它错了吗？以下是我尝试加载的样式和脚本以及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>

来源

2012-02-01 MrDrewskii

不能嵌套一个style标签内的script标签。下面将实现你想要的行为......

<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>

来源

2012-02-01 01:14:21 xandercoded

哦，我的，我是哑巴哈哈！谢谢Xander！ – MrDrewskii 2012-02-01 02:13:05

嗯是的，你不能做到这一点... script和style的arent相似的转换进出PHP或ASP或东西。

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

#nav { width: 300px; } 

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

来源

2012-02-01 01:13:57 prodigitalson

在你的榜样，它也不过width:100%作为#bar是#nav的直系后裔。但是，不要使用<节> -element，而应该使用<小时 />，或者更好地为#nav指定一个简单的border-bottom。

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

来源

2012-02-01 01:24:36 Bergi

我使用它来做一些jQuery，我需要它是另一个部分。 – MrDrewskii 2012-02-01 02:14:24

你可以用纯CSS做（几乎）每一个宽度的魔法。请张贴你的真实例子。 – Bergi 2012-02-06 16:29:34

如何根据另一节的计算宽度设置节的宽度？

回答

相关问题