此函数还保留隐藏内容。
function remove_style(all) {
var i = all.length;
var j, is_hidden;
// Presentational attributes.
var attr = [
'align',
'background',
'bgcolor',
'border',
'cellpadding',
'cellspacing',
'color',
'face',
'height',
'hspace',
'marginheight',
'marginwidth',
'noshade',
'nowrap',
'valign',
'vspace',
'width',
'vlink',
'alink',
'text',
'link',
'frame',
'frameborder',
'clear',
'scrolling',
'style'
];
var attr_len = attr.length;
while (i--) {
is_hidden = (all[i].style.display === 'none');
j = attr_len;
while (j--) {
all[i].removeAttribute(attr[j]);
}
// Re-hide display:none elements,
// so they can be toggled via JS.
if (is_hidden) {
all[i].style.display = 'none';
is_hidden = false;
}
}
}
用法
像这样调用函数
var all = document.getElementsByTagName('*');
remove_style(all);
注意:根据页面中元素的数量,通过通配符查询选择页面中的所有元素可能会很慢。您可以使用更小的元素集来提高性能
var set = document.getElementById('foo').getElementsByTagName('bar');
remove_style(set);
优秀的代码片段,感谢分享。我可以看到当尝试更新旧站点时,这将非常有用,因为客户不想重新编码它。
感谢代码片段!
如果有一个书签可以做类似的事情会很酷。在将页面转换为 HTML5 标准时,这可能很有用,因为在这些标准中,许多这些属性已过时。
我已经制作了可以执行我上面描述操作的书签!
如果您有兴趣,请查看 attrebuke。
我发现此代码中存在一个小问题。显然在 IE 中,removeAttribute 会对
bgColor
(带有标题大小写C
)起作用,但不会对bgcolor
起作用。因此,最好同时包含这两个属性。作为一名设计师,我经常花时间修改其他人的代码,这真是个救星!迫不及待地想尝试一下。似乎对于需要设计的有针对性的元素的项目,它会最有效。
jQuery 也一样
删除所有样式
$(‘#foo bar’).removeAttr(‘style’);
删除一个
$(‘#foo bar’).css(‘float’,”);
如果您愿意替换该元素的任何其他内联样式,可以使用 style.cssText 属性。
document.getElementById(‘idstring’).style.cssText=
‘font-size:1em;color:blue;visibility:visible’;
以下是上述代码的来源
好的…. 那么,使用此方法和 element.removeAttribute(‘style’) 之间的区别是什么?
style
只是一个可能的表现属性当我找到它时,我非常激动,以为它可以帮助我从 HTML 电子邮件中删除所有内联样式,但它似乎不起作用。我开始排查原因,但这是我的猜测
我的 HTML 电子邮件不是 HTML5 文档
目前我只有这些信息。
我也尝试了书签,但没有成功。
这应该适用于 HTML 电子邮件吗?我意外地将所有 CSS 都内联了,经过几个小时的调整,并保存到非内联版本的顶部。太痛苦了。我会花一些时间尝试使其正常工作,但在某些时候,从节省时间的角度来看,重新制作 HTML 电子邮件可能更快。
你怎么看?
以防其他人偶然发现这篇帖子,以下是如何从 HTML 电子邮件中删除内联样式
在结束 body 标签之前添加以下内容
保存文件并在浏览器中打开它。右键单击并选择“检查”。然后,右键单击 HTML 元素,选择“以 html 形式编辑”,现在您可以选择全部以复制已删除内联样式的 HTML。
如果您在 HTML 中使用条件注释(应该使用),则必须在以后进行一些手动查找和替换,以从条件注释内的任何内容中删除内联样式。
作为我上面(尘封的)旧评论的后续,我在博客中更详细地介绍了该问题的解决方案
http://wepiphany.com/remove-inline-styles-from-html-email/
这仅适用于使用 getElementByTagName 吗?
我尝试了这个
var targetElement = document.getElementById(“div2”);
它没有起作用。
您可以使用 ID 吗?(如果只有一个元素,这似乎更容易定位特定元素)