<style>
  .order[data-order-state="new"] {
    color: green;
  }
  .order[data-order-state="pending"] {
    color: blue;
  }
  .order[data-order-state="canceled"] {
    color: red;
  }
</style>
<div id="order" class="order" data-order-state="new">
  A new order.
</div>
<script>
  // قراءة 
  alert(order.dataset.orderState); // new
  // تعديل 
  order.dataset.orderState = "pending"; // (*)
</script>