- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我希望重写 element.styleSheet.cssText
函数
element = document.createElement("style");
element.styleSheet.cssText = ...
Object.prototype.styleSheet.cssText = function(){
console.log('override');
}
我收到一条错误消息,指出 styleSheet 为空或未定义。我正在使用 Internet Explorer,所以我希望stylesheet
存在。
感谢任何帮助
最佳答案
据我所知,没有真正的方法来覆盖 CSSStyleDeclaration
上的原生 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
属性实现了当我们尝试获取/设置 cssText
属性时调用的 native getter/setter。
好的,好的!让我们重新定义自定义 CSSStyleDeclaration.prototype.cssText
getter/setter。嗯,这行不通,因为它似乎 cssText
属性不是来自原型(prototype),即使它会 there's no way to get custom getters/setters使用 Object.getOwnPropertyDescriptor
所以我们将无法从我们的自定义函数调用 native setter 。
不管怎样,让我们看看:
Object.defineProperty(CSSStyleDeclaration.prototype, 'cssText', {
get: function () { return 'overrided'; }
});
document.createElement('style').style.cssText; //(empty string)
那有解决办法吗?好吧,目前可能还没有安全的解决方案,但最好的办法是在新创建的元素上用自定义访问器替换 style
属性。该访问器将返回一个对象,该对象实现与 CSSStyleDeclaration
实例相同的接口(interface),但所有访问器/函数都将被替换以将操作委托(delegate)给原始样式对象。
返回的对象基本上充当真实样式对象的代理对象。这是唯一的方法,因为我们无法访问 native getter/setter 函数,否则我们只能在元素的 native 样式对象上重新定义 cssText
访问器。
在下面的示例中,我仅通过代理 cssText
属性来演示这个想法。
注意:我们创建 CSSStyleDeclaration.prototype
实例的原因是为了确保 styleProxy instanceof CSSStyleDeclaration
保持为真。
实现不完整且使用不安全
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.styleSheet.cssText,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19775573/
我想生成没有样式表的脚手架,我发现了这两个标志:--skip-stylesheets、--no-stylesheets。他们有什么区别? 最佳答案 如果您运行rails gscaffold --hel
在调查使用 附加 CSS 的优缺点时处理指令,我遇到了一些问题。 假设我们有一个简单的 XHTML 文档(以 application/xhtml+xml MIME 类型提供并在 Web 浏览器中查看
documentation提供了 StyleSheet.absoluteFillObject() 的示例,其行为在与 StyleSheet.absoluteFill() 一起使用时也是相同的: con
我找到了 this guide为 rst2pdf了解如何在生成的 pdf 文档中设置 reStructuredText 文件的样式。例如,在我的 JSON 样式表中包含以下内容,它已成功应用于整个文档
我正在构建一个相当大的网站,其中包含许多页面和文件夹。我有 1 个样式表。 如何将样式表添加到这些文件夹的“全部”?在我开始将页面放在单独的文件夹中之前,我没有遇到这个问题。现在每个页面都有自己的文件
padding 和 margin 有什么区别? 两者做同样的事情。 最佳答案 这张图片是更好的解释 关于stylesheet - 填充和边距有什么区别?,我们在Stack Overflow上找到一个类
我是一名网络开发人员...... 12 年了,其中很多是业余爱好,最近 5 年是专业的。但是我仍然无法解决以下问题,这可能是一个非常愚蠢的问题,尤其是来自我的问题,但是: 为什么我们仍然使用像素来表示
我正在通过这个网站学习 React Native https://www.tutorialspoint.com/react_native/react_native_animations.htm 但是,
我正在尝试为我的 React 组件创建一些样式,如下所示: var styles = StyleSheet.create({ /*Pinout*/ /*GPIO Shapre*/ gpio_ou
是否有命令行选项来更改由 javadoc 创建的样式表文件? 我想使用我自己的css文件。 默认的蓝色很无聊。我尝试了一个 -stylesheet 选项,但它不受支持。 最佳答案 是的,这是可能的,而
我想知道如何实现像 iGoogle 一样的网站定制(特别是我想知道如何将网页的一部分(又名“prtlets”)拖放到不同的角落)? 最佳答案 看到这个问题 how-to-use-draggable-s
当前的 Google Mini 设置在设备上使用自定义样式表设置。我希望将不同的样式应用于我正在集成到站点中的另一个集合。如何覆盖默认值并应用自定义样式?您将自定义样式表放在哪里以便可以引用? 最佳答
这是我的build.gradle文件 apply plugin: 'com.android.application' android { compileSdkVersion 25
为了简化代码并将 Prop 传递给我的样式,我想出了这个解决方案 const styles = StyleSheet.create({ someNormalStyle: { backgro
我正在使用 css3 动画将元素从屏幕的一侧移动到另一侧。无论屏幕分辨率如何,我都想确保此效果有效。为此,我使用 document.styleSheets 访问包含所有动画关键帧的 css 文件并更改
我已经创建了 QGLwidget 的子类,我希望我可以使用样式表来告诉 openGL 如何渲染场景。 例如: qApp->setStyleSheet("CustomWidget { backgroun
我正在尝试使用 border-radius 属性来制作图像显示的效果。本意是一个转 Angular ,转向另一个方向。 我正在使用一个包含三个单元格的表格,但是你怎么看,我必须解决水平边框问题。如果我
我正在寻求一些网络架构建议:我想知道如何共享公共(public)文件,例如样式表,在跨越虚拟目录和许多开发人员的 Web 应用程序中,而不是在每个元素中都有冗余文件?有哪些建议? 最佳答案 在不了解您
我对 Qt 样式表的管理有疑问。 我有一个大型 Qt 应用程序,可以动态更改其颜色主题。为此,我创建了几个样式表(一个按主题 - 它们非常大)。当用户想要更改颜色主题时,他单击调用 MainWindo
我的网页没有链接样式表。不知道这是怎么回事这是我第一次使用样式表。需要了解我是否只是遗漏了什么。如果有助于理解我的错误来源,愿意发送整个文档。我有。路径都在根文件夹中。不知道我错过了什么。救命!! H
我是一名优秀的程序员,十分优秀!