Получить значение от html до элемента style

Question

Я пытаюсь определить ширину моего внешнего элемента span (.bar-1), используя значение моего внутреннего элемента span.

<span class="bar bar-1">
<span name="PERCENTAGE" id="PERCENTAGE" disabled="" title="Total Percentage" maxlength="255" value="66" tabindex="-1" sectionid="MODE_TOOL">
    <span class="Text">66</span>
</span>

У меня нет возможности изменить содержимое, я просто пытаюсь выяснить, как я могу сделать ширину моего внешнего диапазона = 66%.

Answer 1

Если я понимаю ваш вопрос, вы можете сделать это в JavaScript. Пролеты не имеют ширины, если только вы не используете display: inline-block;.

С базисом c JavaScript:

<script>
var elem = document.getElementsByClassName('bar-1');
  for(i = 0; i <elem.length; i++) {
    elem[i].style.width = document.getElementById('PERCENTAGE').innerText + "%";
    elem[i].style.display = "inline-block";
  }
</script>

Answer 2

Спасибо вам обоим. К сожалению, администраторы не позволили мне добавить JavaScript код.

В конце концов, я использовал следующее решение css:

span[value="66"] {width:66%};

Очевидно, мне нужно было добавить это для каждого числа от 0 до 100.

Answer 3

Полагаю, вам понадобится Javascript для чего-то подобного. Использование jQuery:

var tmp = $(".Text").text();

И затем используйте это значение для установки стиля на .bar1, например:

$(".bar1").width(tmp);