jquery - jQuery 将应用的类转换为样式属性

Question

我正在做一个书签项目。因此，当用户单击书签时，他可以抓取网页的部分内容并在其他地方查看。

问题是部分元素（假设是 div）应用了 css 样式和类。

有没有办法遍历选定 div 的所有子元素并将类属性转换为样式属性，以便我可以保持格式设置？

例如下面的示例屏幕截图；我需要取出所有应用的类并将它们转换为选定区域的样式属性。

Answer 1

(function($) {
    $.extend($.fn, {
        makeCssInline: function() {
            this.each(function(idx, el) {
                var style = el.style;
                var properties = [];
                for(var property in style) { 
                    if($(this).css(property)) {
                        properties.push(property + ':' + $(this).css(property));
                    }
                }
                this.style.cssText = properties.join(';');
                $(this).children().makeCssInline();
            });
        }
    });
}(jQuery));

你会用它来调用它

$(".select").makeCSSInline();

这个函数的问题在于它将每个 CSS 属性都带入标签中，因此它可能会导致严重的性能损失，但如果您愿意承担这个风险，请继续

小提琴

_{从这里获取的功能}

Answer 2

固定与引导程序一起使用

(function($) {
    $.extend($.fn, {
        makeCssInline: : function(sizes) {
            this.each(function(idx, el) {
                var style = el.style;
                var properties = [];
                for(var property in style) {
                    if(property=="height" || property=="width") { continue; }
                    if($(this).css(property)) {
                        properties.push(property + ':' + $(this).css(property));
                    }
                }

                if(sizes) {
                    properties.push("width" + ':' + $(this).width()+"px");
                    properties.push("height" + ':' + $(this).height()+"px");
                }

                this.style.cssText = properties.join(';');
                $(this).children().makeCssInline();
            });
        }
    });
}(jQuery));