关于前端组件的封装的 问题

如果不使用任何前端框架, 自己写前端代码
有些组件, 是跟数据有关联性的
比如, 有一种按钮, 他又三个状态, 在UI 上分别用三种不同的背景图片表示
在程序逻辑上, 分别给这些按钮的element对象添加一个属性来表示他的状态

 <button id="btnFoo"></button><button id="btnBar"></button>

 document.getElementById("btnFoo")["state"]="ready";

大家看看这种方式, 有没有什么不妥, 有没有更好的办法?
浏览器不支持HTML5的

自定义属性用getAttribute、setAttribute方法来做，而不是 document.getElementById("btnFoo")["state"]="ready";如果你初始化了state属性，标准浏览器不能通过document.getElementById("btnFoo")["state"]来获取自定义属性值，可以使用document.getElementById("btnFoo").getAttribute('state')获取

 <input type="button" id="btn" value="state" state="ready"/>
<script>
var btn=document.getElementById('btn');
alert(btn['state'])//undefined
alert(btn.getAttribute('state'))//ready
</script>

状态直接用class表示不行吗？一个class既解决不同背景问题又记录了该状态。

我是菜鸟，我也要来学习一下

楼上showbo说的对