diff --git a/runtime/main/model/compiler.ts b/runtime/main/model/compiler.ts
index f86355a0..00c55ae7 100644
--- a/runtime/main/model/compiler.ts
+++ b/runtime/main/model/compiler.ts
@@ -199,11 +199,11 @@ function compileVm(vm: Vm, body: Node): void {
     node.children.forEach((child: Node) => {
       const el = child as Element;
       const tag = child.type;
-        if (count === 0) {
-          setTagStyle(vm, el, tag, true, false, false);
-        } else if (count === node.children.length - 1) {
-          setTagStyle(vm, el, tag, false, true, false);
-        }
+      if (count === 0) {
+        setTagStyle(vm, el, tag, true, false, false);
+      } else if (count === node.children.length - 1) {
+        setTagStyle(vm, el, tag, false, true, false);
+      }
       count++;
       compileVm(vm, child);
     });
@@ -218,16 +218,16 @@ function compileCounter(vm: Vm, body: Node): void {
     node.children.forEach((child: Node) => {
       const el = child as Element;
       const tag = child.type;
-      if (count[tag] == undefined) {
+      if (count[tag] === undefined) {
         count[tag] = 1;
       } else {
         count[tag] = count[tag] + 1;
       }
-      let css = vm._css || {};
+      const css = vm._css || {};
       if (css) {
-        let data =  css[tag] || {};
-        if (data){
-          let counterIncrement = data['counterIncrement'];
+        const data = css[tag] || {};
+        if (data) {
+          const counterIncrement = data['counterIncrement'];
           if (counterIncrement !== undefined) {
             updateTagCounter(el, count[tag]);
           }
@@ -244,10 +244,10 @@ function compileElementAndElement(vm: Vm, body: Node): void {
     node.children.forEach((child: Node) => {
       if (child.nextSibling) {
         const el = child.nextSibling as Element;
-        const tag = child.type + '+' + child.nextSibling.type
+        const tag = child.type + '+' + child.nextSibling.type;
         setTagStyle(vm, el, tag, false, false, false);
       }
-      compileElementAndElement(vm, child)
+      compileElementAndElement(vm, child);
     });
   }
 }
@@ -636,7 +636,6 @@ function compileNativeComponent(vm: Vm, template: TemplateInterface, dest: FragB
 
   if (!vm._rootEl) {
     vm._rootEl = element;
-
     // Bind event earlier because of lifecycle issues.
     const binding: any = vm._externalBinding || {};
     const target = binding.template;
@@ -753,7 +752,6 @@ function bindRepeat(vm: Vm, target: TemplateInterface, fragBlock: FragBlockInter
         }
         trackMap[key] = item;
       });
-
       // Remove unused element foreach old item.
       const reusedList: any[] = [];
       const cacheList: any[] = [];
@@ -773,7 +771,6 @@ function bindRepeat(vm: Vm, target: TemplateInterface, fragBlock: FragBlockInter
           });
         }
       });
-
       // Create new element for each new item.
       children.length = 0;
       vms.length = 0;
diff --git a/runtime/main/model/directive.ts b/runtime/main/model/directive.ts
index a98739e9..a0cf9dd4 100644
--- a/runtime/main/model/directive.ts
+++ b/runtime/main/model/directive.ts
@@ -48,7 +48,6 @@ import {
 } from './compiler';
 import Vm from './index';
 import Element from '../../vdom/Element';
-import Node from '../../vdom/Node';
 
 const SETTERS = {
   attr: 'setAttr',
@@ -58,12 +57,13 @@ const SETTERS = {
   event: 'addEvent',
   idStyle: 'setIdStyle',
   tagStyle: 'setTagStyle',
+  attrStyle: 'setAttrStyle',
   tagAndTagStyle: 'setTagAndTagStyle',
   tagAndIdStyle: 'setTagAndIdStyle',
-  universalStyle: 'setUniversalStyle'
+  universalStyle: 'setUniversalStyle',
+  firstOrLastChildStyle: 'setFirstOrLastChildStyle'
 };
 
-
 enum ContentType {Content_String, Content_Open_Quote, Content_Close_Quote, Content_Attr, Content_Counter};
 interface ContentObject {
   value: string,
@@ -849,7 +849,6 @@ export function bindDir(vm: Vm, el: Element, name: string, data: object, isFirst
       }
     }
   }
-  let isOpen = false;
   while (i--) {
     let key = keys[i];
     const value = data[key];
@@ -877,12 +876,16 @@ export function bindDir(vm: Vm, el: Element, name: string, data: object, isFirst
     }
 
     if (name === 'tagAndIdStyle') {
-      let newValue = updateTagAndIdStyle(el, key, value);
+      const newValue = updateTagAndIdStyle(el, key, value);
       methodName = SETTERS['attr'];
       method = el[methodName];
       method.call(el, 'value', newValue);
       continue;
     }
+    if (name === 'attr') {
+      setAttributeStyle(vm, el);
+    }
+
     method = el[methodName];
     if (key === 'ref') {
       vm.$refs[value] = el;
@@ -993,10 +996,10 @@ function isArray(params: any): params is Array<string> {
 
 function splitItems(valueStr: string): void {
   let i: number;
-  let item: string  = '';
+  let item: string = '';
   let startQuote: boolean = false;
   let itemList: string[] = [];
-  let len = valueStr.length;
+  const len = valueStr.length;
   for (i = 0; i < len; i++) {
     if (!startQuote) {
       if (valueStr[i] === '"') {
@@ -1010,7 +1013,7 @@ function splitItems(valueStr: string): void {
         continue;
       } else {
         item = item + valueStr[i];
-        if (i == len - 1) {
+        if (i === len - 1) {
           const itemListLength = itemList.length;
           itemList[itemListLength] = item;
         }
@@ -1035,17 +1038,16 @@ function splitItems(valueStr: string): void {
 
 function doSplitItem(itemList: string[]): void {
   let i: number;
-  let isValidate: boolean = true;
   let itemListLength = itemList.length;
   for (i = 0; i < itemListLength; i++ ) {
     let item = itemList[i].trim();
     if (item.indexOf('"') === 0) {
       item = item.replace('"', '');
       item = item.replace('"', '');
-      let contentObject: ContentObject = {
+      const contentObject: ContentObject = {
         value: item,
         contentType: ContentType.Content_String
-      }
+      };
       const finallyItemsLength = finallyItems.length;
       finallyItems[finallyItemsLength] = contentObject;
     } else {
@@ -1057,55 +1059,47 @@ function doSplitItem(itemList: string[]): void {
       }
     }
   }
-  if (finallyItems.length > 0) {
-    let i: number;
-    const finallyItemsLength = finallyItems.length;
-    for (i = 0;i < finallyItemsLength; i++) {
-    }
-  }
 }
 
 function splitItem(item: string): void{
-  if (item.length == 0) {
+  if (item.length === 0) {
     return;
   }
   let finallyItemsLength = finallyItems.length;
   if (item.indexOf('open-quote') === 0) {
-    let subItem = item.substr(0, 10);
-    let contentObject: ContentObject = {
+    const subItem = item.substr(0, 10);
+    const contentObject: ContentObject = {
       value: subItem,
       contentType: ContentType.Content_Open_Quote
-    }
-
+    };
     finallyItems[finallyItemsLength] = contentObject;
     splitItem(item.substr(10).trim());
   } else if (item.indexOf('close-quote') === 0) {
-    let subItem = item.substr(0, 11);
-    let contentObject: ContentObject = {
+    const subItem = item.substr(0, 11);
+    const contentObject: ContentObject = {
       value: subItem,
       contentType: ContentType.Content_Close_Quote
-    }
+    };
     finallyItems[finallyItemsLength] = contentObject;
     splitItem(item.substr(11).trim());
   } else if (item.indexOf('attr') === 0) {
-    let fromIndex = item.indexOf('(');
-    let toIndex = item.indexOf(')');
-    let subLen = toIndex - fromIndex - 1;
-    let subItem = item.substr(fromIndex + 1, subLen).trim();
-    let contentObject: ContentObject = {
+    const fromIndex = item.indexOf('(');
+    const toIndex = item.indexOf(')');
+    const subLen = toIndex - fromIndex - 1;
+    const subItem = item.substr(fromIndex + 1, subLen).trim();
+    const contentObject: ContentObject = {
       value: subItem,
       contentType: ContentType.Content_Attr
-    }
+    };
     finallyItems[finallyItemsLength] = contentObject;
     splitItem(item.substr(toIndex + 1).trim());
   } else if (item.indexOf('counter') === 0) {
-    let fromIndex = item.indexOf('(');
-    let toIndex = item.indexOf(')');
-    let subItem = 'counter(0)';
-    let contentObject: ContentObject = {
+    const toIndex = item.indexOf(')');
+    const subItem = 'counter(0)';
+    const contentObject: ContentObject = {
       value: subItem,
       contentType: ContentType.Content_Counter
-    }
+    };
     finallyItems[finallyItemsLength] = contentObject;
     splitItem(item.substr(toIndex + 1).trim());
   } else {
@@ -1114,7 +1108,7 @@ function splitItem(item: string): void{
 }
 
 function setContent(el: Element, key: string): string {
-  let itemLength = finallyItems.length;
+  const itemLength = finallyItems.length;
   let contentValue = '';
   let newValue = '';
   if (itemLength > 0) {
@@ -1140,7 +1134,6 @@ function setContent(el: Element, key: string): string {
       }
     }
     const oldValue = el.attr['value'];
-    
     if (key === 'content::before') {
       newValue = contentValue + oldValue;
     } else if (key === 'content::after') {
@@ -1197,8 +1190,8 @@ export function updateTagCounter(el: Element, counter: number): void {
     let fromIndex = value.indexOf('counter');
     if (fromIndex !== -1) {
       value = value.replace('counter(0)', counter);
-      let methodName = SETTERS['attr'];
-      let method = el[methodName];
+      const methodName = SETTERS['attr'];
+      const method = el[methodName];
       method.call(el, 'value', value);
     }
   }
@@ -1218,9 +1211,9 @@ function updateTagAndIdStyle(el: Element, key: string, value: string): string {
         newValue = contentValue + oldValue;
         oldValue = newValue;
       } else if (el.hasBefore && value === 'close-quote' && key === 'content::before') {
-         el.hasBefore = false;
-         oldValue = oldValue.substr(1, oldValue.length);
-         newValue = oldValue;
+        el.hasBefore = false;
+        oldValue = oldValue.substr(1, oldValue.length);
+        newValue = oldValue;
       }
     }
   } else if (key === 'content::after') {
@@ -1255,4 +1248,35 @@ function updateTagAndIdStyle(el: Element, key: string, value: string): string {
     }
   }
   return newValue;
+}
+
+function setAttributeStyle(vm: Vm, el: Element): void {
+  const css = vm._css;
+  if (css) {
+    const keys = Object.keys(css);
+    if (keys !== undefined || keys !== null) {
+      const i = keys.length;
+      let j: number = 0;
+      for (j; j < i; j++) {
+        let cssKey = keys[j].trim();
+        if (cssKey.indexOf('[') === 0) {
+          cssKey = cssKey.substr(1, cssKey.length - 2);
+          let equalIndex = cssKey.indexOf('=');
+          if (equalIndex !== -1) {
+            const attrId = cssKey.substr(0, equalIndex).trim();
+            let attrValue = cssKey.substr(equalIndex + 1).trim();
+            if (attrValue.indexOf('\"') !== -1) {
+              attrValue = attrValue.replace('"', '').trim();
+              attrValue = attrValue.replace('"', '').trim();
+            }
+            const elValue = el.attr[attrId];
+            if (elValue !== undefined && elValue === attrValue) {
+              let newKey = keys[j];
+              bindDir(vm, el, 'attrStyle', css[newKey]);
+            }
+          }
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/runtime/vdom/Element.ts b/runtime/vdom/Element.ts
index f1773dc8..6ca28f43 100644
--- a/runtime/vdom/Element.ts
+++ b/runtime/vdom/Element.ts
@@ -47,6 +47,7 @@ class Element extends Node {
   private _event: any;
   private _idStyle: any;
   private _tagStyle: any;
+  private _attrStyle: any;
   private _tagAndTagStyle: any;
   private _firstOrLastChildStyle: any;
   private _universalStyle: any;
@@ -109,6 +110,7 @@ class Element extends Node {
     this._event = {};
     this._idStyle = {};
     this._tagStyle = {};
+    this._attrStyle = {};
     this._tagAndTagStyle = {};
     this._firstOrLastChildStyle = {};
     this._universalStyle = {};
@@ -808,7 +810,7 @@ class Element extends Node {
       return;
     }
     // If inline id class style has define return.
-    if (this.style[key] || this._idStyle[key] || this._classStyle[key] || this._firstOrLastChildStyle[key] || this._tagAndTagStyle[key]) {
+    if (this.style[key] || this._idStyle[key] || this._attrStyle[key] || this._classStyle[key] || this._firstOrLastChildStyle[key] || this._tagAndTagStyle[key]) {
       return;
     }
     this._tagStyle[key] = value;
@@ -820,12 +822,29 @@ class Element extends Node {
     }
   }
 
+  public setAttrStyle(key: string, value: string | number, silent: boolean = false): void {
+    if (this._attrStyle[key] === value && silent !== false) {
+      return;
+    }
+    // If inline id style define return.
+    if (this.style[key] || this._idStyle[key]) {
+      return;
+    }
+    this._attrStyle[key] = value;
+    const taskCenter = this.getTaskCenter(this.docId);
+    if (!silent && taskCenter) {
+      const result = {};
+      result[key] = value;
+      taskCenter.send('dom', { action: 'updateStyle' }, [this.ref, result]);
+    }
+  }
+
   public setTagAndTagStyle(key: string, value: string | number, silent: boolean = false): void {
     if (this._tagAndTagStyle[key] === value && silent !== false) {
       return;
     }
     // If inline id class style has define return.
-    if (this.style[key] || this._idStyle[key] || this._classStyle[key] || this._firstOrLastChildStyle[key]) {
+    if (this.style[key] || this._idStyle[key] || this._attrStyle[key] || this._classStyle[key] || this._firstOrLastChildStyle[key]) {
       return;
     }
     this._tagAndTagStyle[key] = value;
@@ -842,7 +861,7 @@ class Element extends Node {
       return;
     }
     // If inline id class style has define return.
-    if (this.style[key] || this._idStyle[key]) {
+    if (this.style[key] || this._idStyle[key] || this._attrStyle[key]) {
       return;
     }
     this._firstOrLastChildStyle[key] = value;
@@ -948,6 +967,7 @@ class Element extends Node {
     this.assignStyle(style, this._tagStyle);
     this.assignStyle(style, this._tagAndTagStyle);
     this.assignStyle(style, this._classStyle);
+    this.assignStyle(style, this._attrStyle);
     this.assignStyle(style, this._firstOrLastChildStyle);
     this.assignStyle(style, this._idStyle);
     this.assignStyle(style, this.style);
@@ -1050,6 +1070,7 @@ class Element extends Node {
     this._event = {};
     this._idStyle = {};
     this._tagStyle = {};
+    this._attrStyle = {};
     this._tagAndTagStyle = {};
     this._firstOrLastChildStyle = {};
     this._universalStyle = {};