The setter function can not be triggered in chrome

Question

<input type="text" id="test">
<script type="text/javascript">
    var test=document.getElementById("test");
    Object.defineProperty(test.style,"width",{
        set:function(){
            alert(1);
        }
    });
   test.onfocus=function(){
       test.style.width="120px";
   }
</script>

when the input's width change,the setter function can be triggered in IE11 and FireFox,but it can not work in chrome.

Perhaps you explain what you want to achieve so we do not have an X/Y problem — mplungjan, Mar 20 '15 at 09:17
@mplungjan the title is pretty clear, it doesn't work in chrome only http://jsfiddle.net/moogs/5626t03L/1/ — Miguel Mota, Mar 20 '15 at 09:21
I understand, but what is the point of the code in the first place? And why not use this.style.width ? — mplungjan, Mar 20 '15 at 09:22
To call the setter function when the style property is changed. The setter function can add additional functionality when setting properties, kind of like a proxy. — Miguel Mota, Mar 20 '15 at 09:26
@mplungjan the question marked as duplicate does not address the same issue by the way. — Miguel Mota, Mar 20 '15 at 09:32
So it was a duplicate but of [Override property CSSStyleDeclaration.textShadow](http://stackoverflow.com/questions/8225149/override-property-cssstyledeclaration-textshadow) — mplungjan, Mar 20 '15 at 12:19

score 3 · Accepted Answer · edited May 23 '17 at 12:22

3

Unfortunately, it looks like an old bug in Chrome:

In chrome, unlike other browsers, CSSStyleDeclaration is a function rather than an object.

Override property CSSStyleDeclaration.textShadow?

edited May 23 '17 at 12:22

Community

1
1

answered Mar 20 '15 at 09:23

Miguel Mota

20,135
5
45
64

The setter function can not be triggered in chrome

1 Answers1