Как установить ширину раздела на основе рассчитанной ширины другого раздела?

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

В вашем примере это будет просто width:100%, поскольку #bar является прямым потомком #nav. Однако вместо использования

-элемента вы должны либо использовать

---

, либо лучше поставить простую рамку для # nav.

Ответ на вопрос "как установить правило css динамически?" можно найти в статье Полностью Pwn CSS с Javascript . Не используйте это решение для вашей проблемы.

Answer 3

Угу, да, вы не можете этого сделать ... script и style не похожи на включение и выключение PHP или ASP или чего-то еще.

Однако вам не нужно использовать js для этого.если вы установите #bar для элемента уровня блока, то по умолчанию будет ширина #nav:

#nav { width: 300px; }

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