删除 HTML 标记的内联样式元素答案

【问题标题】：Remove Inline Style Element Of a HTML Tag删除 HTML 标记的内联样式元素
【发布时间】：2020-03-24 14:09:35
【问题描述】：

我想在我的 Wordpress 菜单中添加一点菜单悬停动画：

https://www.littlesnippets.net/blog/some-css-menu-inspiration-using-animated-lines

不知何故，我的 Wordpress 主题 (Avada) 将内联 html 样式写入标签：

<ul id="menu-menu" class="fusion-menu">
  <li ><a href="#Home" data-hover="Home" **style="overflow: hidden; height: 100px;**"><span class="menu- 
  text">Home</span></a></li>
  <li ><a href="#Events" data-hover="Events" **style="overflow: hidden; height: 100px;**"><span 
  class="menu-text">Events</span></a></li>
</ul>

...

我将此代码添加到我的functions.php：

add_filter( 'the_content', 'the_content_filter', 20 );

function the_content_filter( $content ) {
    $content = preg_replace('#<a.*?>(.*?)</a>#i', '<a>\1</a>', $content);
    return $content;
}

但这会删除我页面上的太多样式元素。如何调整功能，只删除 .fusion-menu 类中的内联样式标签？

感谢您的帮助！

【问题讨论】：

我不会对 html5 使用正则表达式，因为它是一种松散的语言。您所要做的就是再次使用 JavaScript 对其进行样式设置，或者简单地删除该属性。从长远来看，更好的选择是手动编辑主题模板以使用更好的特异性
这能回答你的问题吗？ removing html element styles via javascript

标签： html css wordpress styles inline

【解决方案1】：

$('ul#menu-menu li').attr('style', function(i, style)
{
    return style && style.replace(/display[^;]+;?/g, '');
});

请检查上面的代码，它会用 jQuery 删除

【讨论】：

为一项简单的任务引入整个库？而且您的选择器不是 OP 想要的，您的正则表达式将因多个属性而失败，这个问题是重复的，并且已经有了答案
HTML5 是宽容的：p 例如，一些浏览器会接受它作为有效语法 style=“display:none”，但您的正则表达式将删除 display:none”（包括最后一个双引号）留下 style=“。举个例子。正则表达式是 HTML5 的硬汉，如果有替代品，最好不要依赖它

【解决方案2】：

我已经尝试过使用 jQuery，但这不起作用，因为我认为该函数必须准确地指向标签。

内联样式来自 fusion builder 模板，但我不知道该函数位于哪个 php 文件中。

我最喜欢的方法是当有人可以使用 preg_replace 完成我的功能时，目标是选择器类 .fusion-menu 中的所有元素

谢谢...

【讨论】：