在前端開發過程中，通過JS操作元素樣式的情況非常普遍，其中一個常用的技術就是通過attr屬性添加CSS樣式。

//html
<div id="box" data-color="#F00">這是一個紅色的方框</div>
//css
#box{
width: 100px;
height: 100px;
}

以上代碼中，我們在div元素上添加了一個data-color屬性，值為#F00，也就是紅色。下面我們通過JS代碼為該元素添加背景顏色。

var box = document.getElementById('box');
box.style.backgroundColor = box.getAttribute('data-color');

通過getAttribute方法獲取到data-color屬性的值#F00，然后將其賦值給style.backgroundColor屬性，即可成功改變該元素的背景顏色為紅色。

另外，還可以通過:before和:after等偽元素來使用attr屬性添加樣式。如下代碼可以實現在一個元素前添加一個文字并通過attr屬性來獲取該文字的內容：

//html
<div id="text" data-text="Hello world"></div>
//css
#text:before {
content: attr(data-text);
}

以上代碼中，我們將要添加文本的div元素上添加了一個data-text屬性，值為Hello world。通過CSS為該元素的偽元素:before添加樣式，使用attr屬性獲取data-text的值，將其插入到該元素前。

總之，通過attr屬性能夠更加方便地操作元素的樣式，提高開發效率，也是前端開發中不可或缺的一項技術。