【问题标题】:jQuery .html() and inject inline CSS styles?jQuery .html() 和注入内联 CSS 样式?
【发布时间】:2013-07-30 11:12:35
【问题描述】:

以下代码从表格中提取 HTML 并将内容注入 HTML 电子邮件。

var content = $j('#product_comparison').html();

这种方法的问题在于 HTML 电子邮件失去了样式,因为原始表格引用了外部样式表,而我对 HTML 电子邮件的理解是所有样式都应该是内联的,而不是在外部或 <style> 标记内引用。

是否有任何 Javascript / jQuery 方法可以创建包含内联样式的 HTML,以便结果正确显示在 HTML 电子邮件中?

【问题讨论】:

  • HTML 是什么样的?并且样式不是由 <script> 标签引用,而是由 <style> 标签引用。您可以在电子邮件模板中使用<style> 标签。
  • 抱歉,我的意思是<style> - 将更新原始问题。
  • <table> 本身就相当复杂,<tr> 上有oddeven 类,背景颜色和各种样式
  • 有已知的解决方案可以正常检索应用于元素的所有 CSS。请参阅此处的 stackoverflow 主题:stackoverflow.com/questions/754607/…。然后,您可以在转发的 HTML 中使用内联 CSS 将其添加到您的电子邮件中。

标签: javascript jquery html css email


【解决方案1】:

好吧,如果您想要一种粗略但快速的方法来实现这一点,您可以执行以下操作来将一个特定元素的样式属性设置为其所有计算样式:

$('#my-div').css(window.getComputedStyle(document.getElementById('my-div')));

尽管这将为您提供该项目的所有样式属性。

当然,您不能简单地使用.html() 方法,您需要单独克隆每个元素。

http://jsfiddle.net/QfN6N/1/

【讨论】:

    【解决方案2】:

    一旦你得到了 HTML,粘贴到下面链接的工具中,前面是 <link> 到 CSS 文件,它会自动内联所有相关的 CSS。

    MailChimp CSS Inliner

    希望这会有所帮助。

    【讨论】:

      猜你喜欢
      • 2020-11-26
      • 1970-01-01
      • 1970-01-01
      • 2013-11-07
      • 2015-01-03
      • 2015-06-03
      • 2020-10-20
      • 2022-06-30
      • 2015-04-20
      相关资源
      最近更新 更多