如何根據另一節的計算寬度設置節的寬度？

試圖做到這一點，但它錯了嗎？以下是我嘗試加載的樣式和腳本以及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

如何根據另一節的計算寬度設置節的寬度？

回答

相關問題