Javascript 覆盖元素.styleSheet.cssText

我希望覆盖

元素.styleSheet.cssText

函数

element = document.createElement("style");
element.styleSheet.cssText = ...

Object.prototype.styleSheet.cssText = function(){
    console.log('override');
}

我得到一个错误，样式表为null或未定义。我正在使用Internet explorer，所以我希望

样式表

存在

---

非常感谢任何帮助

据我所知，没有真正的方法覆盖对象上的本机

cssText

getter。

让我们看看原因：

var s = document.createElement('style'),
    style = s.style;

style instanceof CSSStyleDeclaration; //true

但是，到目前为止还不错，当我们尝试设置

cssText

属性时：

style.cssText = 'something';
style.cssText; //(empty string), the native setter did not allow setting an invalid style

正如我们所看到的，

cssText

属性实现了本机getter/setter，当我们试图获取/设置

cssText

属性时会调用这些getter/setter

好的，很好！让我们重新定义定制的

CSSStyleDeclaration.prototype.cssText

getter/setter。这不起作用，因为

cssText

属性似乎不是来自原型，即使它会使用，我们也无法从自定义函数调用本机setter

我们还是来看看吧：

Object.defineProperty(CSSStyleDeclaration.prototype, 'cssText', {
    get: function () { return 'overrided'; }
});

document.createElement('style').style.cssText; //(empty string)

那么有解决办法吗？可能还没有安全的解决方案，但最好的办法是在新创建的元素上用自定义访问器替换

style

属性。该访问器将返回一个对象，该对象实现了一个

CSSStyleDeclaration

实例所能实现的相同接口，但所有访问器/函数都将被替换，以将操作委托给原始样式对象

返回的对象基本上充当真实样式对象的代理对象。这将是唯一的方法，因为我们无法访问本机getter/setter函数，否则我们可以仅在元素的本机样式对象上重新定义

cssText

访问器

在下面的示例中，我仅通过代理

cssText

属性来演示这个想法

注意：我们创建

CSSStyleDeclaration.prototype

实例的原因是为了确保CSSStyleDeclaration的

styleProxy实例保持为true

实施不完整，使用不安全

document.createElement = (function (doc, nativeCreateEl) {
    return function() {
        var el = nativeCreateEl.apply(doc, arguments),
            nativeStyle = el.style,
            styleProxy = Object.create(CSSStyleDeclaration.prototype);

        Object.defineProperty(el, 'style', {
            get: function () {
                return styleProxy;
            }
        });

        Object.defineProperty(styleProxy, 'cssText', {
            set: function (styles) {
                console.log('setting cssText');

                nativeStyle.cssText = styles;
            },
            get: function () {
                return nativeStyle.cssText;
            }
        });

        return el;
    };
})(document, document.createElement);

var el = document.createElement('div'),
    s = el.style;

s.cssText = 'test'; //logs setting cssText
s.cssText; //(empty string) -> this is expected
s.cssText = 'color: red;'; //logs setting cssText
s.cssText; //color: red;

样式表
可能确实存在。。。只是不是在每个JavaScript对象上。为什么不试试
Element.prototype.styleSheet…
。我需要覆盖文件中的样式表对象，因此当涉及到do element.stylesheet.cssText时，它将使用我的新实现。此外，您可能需要研究类似的问题：