Javascript删除样式以更正布局

Javascript remove style to correct layout

本文关键字：布局 删除 样式 Javascript      更新时间：2023-09-26

我花了相当多的时间研究这个问题，但是，我反复发现我尝试过的每种方法都有问题。我正在使用稍微修改的WordPress版本，从URL和一些文件/文件夹名称中删除"wp-"。这适用于除垂直显示工具栏的TinyMCE编辑器以外的各个方面。我发现删除内联 CSS 元素可以解决这个问题。下面的代码是编辑器的 HTML 代码：

<div id="wp-content-editor-container" class="wp-editor-container”>
 <div id="ed_toolbar" class="quicktags-toolbar" style="position: absolute; top: 0px; width: 0px;">

我正在寻找一种删除该部分的方法：

style="position:absolute; top: 0px; width: 0px;"

从元素。最初我试图从WordPress中删除它，但是，我一直无法找到它在哪里生成。我已经尝试了一些使用Javascript的方法，但是，它们会产生错误和/或不起作用。然而，我会说，这可能只是我正在做的事情，因为我没有Javascript的经验。我尝试了以下方法。

第一次尝试是将以下Javascript作为文件包含在内：

var toolbar=document.getElementById("ed_toolbar");
toolbar.style.position=null;
toolbar.style.width=null;
toolbar.style.min-width=null;

但是，这产生了错误：

Uncaught ReferenceError: Invalid left-hand side in assignment

所以我将代码更改为：

var toolbar=document.getElementById("ed_toolbar");
toolbar.removeAttribute("style");

但是，这会产生以下错误：

Uncaught TypeError: Cannot read property 'removeAttribute' of null

对此的任何想法将不胜感激。

试试这个窗口加载时

$("#ed_toolbar").removeAttr("style"); or
$("#ed_toolbar").attr('style',null);

JS 小提琴

如果要使用jQuery并且不确定该元素是否已在页面最初加载后添加，则可以首先选择比它高一级的div元素。在您的示例中，这将是 id 为 wp-content-editor-container 的div。

Javascript/JQuery：

    //remove the style from the #ed_toolbar div element
    $("#wp-content-editor-container #ed_toolbar").attr("style","");

现在，如果您不确定页面首次加载时是否存在 #wp 内容编辑器，则可以改为使用以下代码：

    //remove the style from the #ed_toolbar div element
    $("body #ed_toolbar").attr("style","");
相关文章：