Javascript刪除樣式來糾正佈局

我花了相當一段時間看着這個，但是，我反覆發現每一個我嘗試過的方法的問題。我使用的是稍微修改過的WordPress版本，它可以從URL和一些文件/文件夾名稱中刪除'wp-'。這適用於除了垂直顯示工具欄的TinyMCE編輯器以外的各個方面。我發現刪除元素內聯CSS解決了這個問題。下面的代碼是一種編輯HTML代碼：Javascript刪除樣式來糾正佈局

<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

任何想法將不勝感激。

來源

2014-12-20 Joe Izzard

你是否等待文檔被加載？當您嘗試刪除屬性時，聽起來像ed_toolbar不存在。無論如何，你可以通過CSS解決這個問題，只需重新設置樣式，並添加！對規則很重要。異步插入編輯器 –

。這看起來像是一個可以使用直接的CSS在騎上完成的事情的很多東西 – charlietfl

是否在iframe中添加了tinymce編輯器？ – Makaze

試試這個在窗口負載

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

JS FIDDLE

來源

2014-12-20 22:13:38

這可能不會起作用，因爲我認爲瀏覽器不會讓您擺脫元素的整個'style'對象。 – Pointy

如果你想使用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-content-編輯器存在時，第一次加載頁面，然後你可以在你的下面的代碼來代替：

//remove the style from the #ed_toolbar div element 
    $("body #ed_toolbar").attr("style","");

來源

2014-12-20 22:26:07

Javascript刪除樣式來糾正佈局

回答

相關問題