Question

我试图用js向css添加规则，我遇到了这行代码。我无法弄清楚这种回归是如何起作用的，我怎么可能在我自己的项目中重写它。

var sheet = function() {    
    var style = document.createElement('style');
    document.head.appendChild(style);   
    return style.sheet;
}();

理想情况下，我想将它包装在某些模块中，例如

var AddCssStyles = {
    makeSheet: function(){
        this.stylesheet = document.CreateElement...
        // return a stylesheet for later use
    }
}
var navigationHeight = Object.create(AddCssStyles);
navigationHeight.makeSheet();

这将让我通过navigationHeight.stylesheet访问工作表进行更改。

Answer 1

我无法弄清楚这种回归是如何起作用的

该代码创建一个函数，然后立即调用它，丢弃该函数。这就是接近结尾的var myImage = new Image(50, 100); myImage.id = 'line-image'; myImage.src = 'images/line.png'; document.getElementById("line").appendChild(myImage); window.onresize = function() { document.getElementById('line-image').height = getDistance(circle1, circle2); }（调用函数）。因此，结果是运行函数中的代码，创建()元素，并返回生成的style元素的sheet属性，然后保留为{{1变量。

我怎么可能在我自己的项目中重写它。

理想情况下，我想将它包装在某些模块中，例如

你走在正确的轨道上，进行了一些调整（见评论）：

style

...然后使用sheet添加规则。或者在对象原型中添加一个方法，用于定义var AddCssStyles = { makeSheet: function(){ var style = document.createElement('style'); document.head.appendChild(style); this.stylesheet = style.sheet; return this.stylesheet; } } var navigationHeight = Object.create(AddCssStyles); var sheet = navigationHeight.makeSheet();上的规则。

制作一个创建样式表的模块

1 个答案: