为电子邮件模板中动态添加的 html 代码设置样式

Posted 2023-02-24

【中文标题】为电子邮件模板中动态添加的 html 代码设置样式

【英文标题】：Set styles for dynamically added html code in email template

【发布时间】：2015-09-18 05:34:34

【问题描述】：

我目前正在开发一个响应式电子邮件模板，并面临如何设置动态添加的 html 代码样式的问题。

由于嵌入式 CSS 不支持大多数电子邮件客户端，我添加了内联样式，因为模板的部分动态加载我无法为该部分添加内联样式。

示例：我需要将以下 html 示例代码动态加载到我的电子邮件模板中。

<p>bla bla bla .....</p>
<a href=""><img src="" class="" /></a>
<p>bla bla bla .....</p>

在此示例中，应如何为 img 元素设置 max-width，使其适用于大多数电子邮件客户端？

请注意，我使用php 作为编程语言。

提前致谢。

【参考方案1】：

我使用html dom parser对html代码进行如下修改，

function add_inline_styles($string)
    $string = str_get_html($string);
    foreach($string->find('img') as $key => $img_tags) 
        $img_tags->setAttribute("style", max-width: 570px;");
    
    return $string;

要使用 dom 解析器，您应该包含 simple_html_dom.php，如需了解更多信息，请关注 documentation。

【参考方案2】：

如果你可以设置class或src，你可以这样做：

 $class='something';

 $class= $class. '"' . ' style="max-wdth:100px;';

那么你将拥有：

 <img src="" class="something" style="max-wdth:100px;" />

【讨论】：

正如我在问题中提到的，我不能为此部分使用内联样式

@JanithChinthana 你为什么不能？

我在问题中提到的html代码部分是动态加载的，因此html代码按原样加载。按照你的建议，我无法改变那里的任何东西

@JanithChinthana 因为你还没有说你能够做什么，所以很难猜出一个合适的解决方案