Override property CSSStyleDeclaration.textShadow?

Question

Is it possible to override the textShadow property of a CSSStyleDeclaration object in JavaScript?

I tried the following:

var element = document.createElement('div');
Object.defineProperty(element.style, 'textShadow', {
    get: function() {
        console.warn("Getter called");
        return "";
    },
    set: function(value) {
        console.log("Setter called");
    },
    configurable: true
});

element.style.textShadow = "black 3px 3px 10px"; // Works as usual

As already stated in the last line, the override of the property does not really work. I found out that textShadow is not an own property of the CSSStyleDeclaration element, but it comes from the CSS2Properties interface. However, I don't know how to get the CSS2Properties interface ...

EDIT: I have tested on Firefox 7.0.1 and Chrome 15. In Chrome it won't work, but FF 8 does work well.

Is there a more generic way to override all textShadow properties of all elements? I can iterate over each HTMLElement and override the textShadow property, but I would like a more convenient way.

Actually, this works as intended for me in Firefox 9 (you should always specify which browsers you are testing on): I get the alerts and the property of the element is not changed. — Viruzzo, Nov 22 '11 at 10:28

score 0 · Accepted Answer · answered Nov 23 '11 at 14:23

0

My problem was arising from a bug in the Chrome browser (see post). In Firefox 8 the code works as expected.

answered Nov 23 '11 at 14:23

Erik

11,944
18
87
126

Override property CSSStyleDeclaration.textShadow?

1 Answers1

Linked