Передача ссылки в CSS?

Question

Я пытаюсь передать ссылку (правильный термин?) В следующем фрагменте css, где под progressbar div я пытаюсь связать% с суммами в долларах в последующем status div, при этом 800/1000 составляет 80%. Есть ли способ сделать это? Спасибо!

<div id="progressbar">
    <div id="progress" style="width: 80%;"> </div>
</div>
<div id="status">
    <span class="heading">MONEY RAISED</span>
    $ 800
    <span class="heading">MONEY ASKED</span>
    $ 1,000 
</div>

Answer 1

Вы можете использовать выражения CSS.

Выражения CSS - это мощный (и опасный) способ динамического задания свойств CSS.Проблема с выражениями заключается в том, что они оцениваются чаще, чем ожидает большинство людей.

http://gadgetopia.com/post/2774
http://msdn.microsoft.com/en-us/library/ms537634(v=vs.85).aspx
http://blog.dynatrace.com/2010/02/16/the-real-performance-overhead-of-css-expressions/

Я не стал бы думать об этом в CSS, поскольку с помощью jquery / javascript это довольно легко.

Если бы вы могли немного изменить свой DOM, это бы очень помогло.Например:

<div id="progressbar">
    <div id="progress"> </div>
</div>
<div id="status">
    <span class="heading">MONEY RAISED</span>
    $ <span id="raised">800</span>
    <span class="heading">MONEY ASKED</span>
    $ <span id="asked">1000</span>
</div>

Чем использовать jquery:

var raised = parseInt($('#raised').text().replace(',','')),
    asked = parseInt($('#asked').text().replace(',',''));
$('#progress').css('width', (raised / asked)*100 +"%");

или javascript:

var raised = parseInt(document.getElementById('raised').innerHTML.replace(',','')),
    asked = parseInt(document.getElementById('asked').innerHTML.replace(',',''));
document.getElementById('progress').style.width = (raised / asked)*100 +"%";

Answer 2

Есть ли способ сделать это?

Нет, не в чистом CSS.Вам нужно будет указать либо класс, либо атрибут style, содержащий желаемую ширину пикселя, либо использовать JavaScript для анализа значений в долларах и соответственно установить ширину.