Attr workaround with variables.

https://code.google.com/p/chromium/issues/detail?id=246571

by Felis Catus

HTML

<ul id="datalist" class="c1">
  <li style="--w1: 31; --w2:154; --c1:123; --c2:67;">a</li>
  <li style="--w1: 141; --w2:23; --c1:75; --c2:120;">b</li>
  <li style="--w1: 59; --w2:45; --c1:32; --c2:73;">c</li>
  <li style="--w1: 47; --w2:55; --c1:155; --c2:73;">d</li>
  <li style="--w1: 40; --w2:99; --c1:79; --c2:38;">e</li>
  <li style="--w1: 34; --w2:71; --c1:10; --c2:130;">f</li>
</ul>
<button onclick="toggleData();">switch</button>

CSS

ul {
  list-style-type: none;
  padding: 0;
  border: 1px solid black;
}
li {
  display: block;
  border: 1px solid black;
  margin: 2px;
  padding: 2px;
  width: calc(var(--w) / 255 * 100%);
  background: rgb(0,var(--c),0);
  transition: all 0.15s ease 0s;
}
.c1 li {
  --w: var(--w1);
  --c: calc(255 - var(--c1));
}
.c2 li {
  --w: var(--w2);
  --c: calc(255 - var(--c2));
}

JavaScript

function toggleData() {
  var datalist = document.getElementById('datalist');
  datalist.classList.toggle('c1');
  datalist.classList.toggle('c2');
}