jQuery将应用的类转换为样式属性
我正在做一个bookmarklet项目。所以,当用户点击bookmarklet时,他可以抓取网页的一部分并在其他地方查看 问题是partial元素(假设div)应用了css样式和类 是否有任何方法可以循环遍历所选div的所有子元素,并将类属性转换为样式属性,以便保留格式 例如下面的示例屏幕截图; 我需要取出所有应用的类,并将它们转换为选定区域中的样式属性 你可以称之为使用jQuery将应用的类转换为样式属性,jquery,css,Jquery,Css,我正在做一个bookmarklet项目。所以,当用户点击bookmarklet时,他可以抓取网页的一部分并在其他地方查看 问题是partial元素(假设div)应用了css样式和类 是否有任何方法可以循环遍历所选div的所有子元素,并将类属性转换为样式属性,以便保留格式 例如下面的示例屏幕截图; 我需要取出所有应用的类,并将它们转换为选定区域中的样式属性 你可以称之为使用 $(".select").makeCSSInline(); 这个函数的问题是,它将每个CSS属性都带到标记中,因此可能会
$(".select").makeCSSInline();
这个函数的问题是,它将每个CSS属性都带到标记中,因此可能会对性能造成重大影响,但如果您愿意冒这个风险,请继续
从获取的函数固定为与引导一起使用
(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));
那么您想从类中提取样式并将其作为内联样式应用吗?如果打开“计算样式”面板,您可以看到所选元素的所有样式。使用JavaScript,您可以迭代每个元素上的每个计算样式(无论是由类还是由浏览器设置),并保存所有样式。这是用JavaScript编写的。@Codygoldner是的,没错。@RoryO'Kane谢谢你的链接。这就是你正在寻找的非常好的解决方案,但却完成了任务。正如您在声明中所暗示的,这应该是最后的手段,并附带“外科医生警告”:
重复使用此解决方案,您的用户可能会遇到延迟、性能或健康问题
(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));