Javascript为innerhtml添加样式

Question

我有以下html

     <div class="product-image1" v-hover-layer>
          <div class="layer" style="text-align: center;margin-top: 30%">
             <a href="/"> View Product </a>
         </div>
     </div>

所以在我的vuejs2指令中

Vue.directive('product-hover', {
   bind:  (el)=> {
     var layer = el.getElementsByClassName('layer');
    if(layer.length > 0){
        //hide the layer
        layer[0].style.display="none";
    }
    // Focus the element
    el.addEventListener("mouseover", event => {
        layer[0].setAttribute("style","color:white;display:block;background-color:#267B53;width:100%;height:100%;background-position:center;opacity:0.3");
    });

    el.addEventListener("mouseout", event => {
        layer[0].el.setAttribute("style","display:none");
    });
},
unbind:(el)=>{
    el.removeEventListener('mouseover')
}

}）;

期待实现的是添加

样式

    color:white;display:block;background-color:#267B53;width:100%;height:100%;background-position:center;opacity:0.3

但是现在遇到了无法读取未定义的属性'setAttribute'的错误

如何设置图层类的样式