如何從HTML頁面剝離特定樣式？

Question

如果相關，應用程序將使用angularJs。

我們允許用戶生成自定義html，然后在預覽窗口中顯示它。 例如，用戶輸入以下內容：

<div style = "background-color:red; border: 1px solid;">Hi there</div>

具體來說，我的目標是采用此html（我以字符串的形式獲取）並去除所有邊框樣式，因此將上述作為參數並返回：

<div style = "background-color:red;">Hi there</div>

最好的解決方法是什么？ RegEx還是有其他解決方案。 我已經考慮過ng-sanitize，但考慮甚至對其進行修改似乎也很痛苦。

Answer 1

您不必為此使用正則表達式。 請不要嘗試，因為這不是正確的方法。

var div = document.createElement('div');
div.innerHTML = myHtmlString;

//recursively visit all nodes in div
//and remove border style elem.style.removeProperty('border');

為了提供更多的上下文信息，因為我沒有真正描述如何執行遞歸邊界移除：

您創建div並將字符串設置為div.innerHTML因為它將允許您在它們上執行DOM函數，從而更易於操作樣式。 下面是訪問所有節點的潛在解決方案。 我選擇不遞歸地編寫它，因為我個人不喜歡遞歸。

 function load() { var contents = "<div style=\\"border: 1px solid red; color: blue;\\"><div style=\\"border: 1px solid red; color: blue;\\">test1</div><div style=\\"border: 1px solid red; color: blue;\\"><div style=\\"border: 1px solid red; color: blue;\\">test2</div><div style=\\"border: 1px solid red; color: blue;\\">test3</div></div><div style=\\"border: 1px solid red; color: blue;\\">test4</div></div>"; //before removing border var beforeDiv = document.createElement('div'); beforeDiv.innerHTML = contents; document.body.appendChild(beforeDiv); //after removing border var div = document.createElement('div'); div.innerHTML = contents; //list of all nodes to visit var nodesToVisit = new Array(); //load each child of div into this list for(i = 0; i < div.children.length; i ++) { nodesToVisit.push(div.children[i]); } //process entire list until we've exhausted all children for(i = 0; i < nodesToVisit.length; i ++) { var node = nodesToVisit[i]; if(node != undefined) { if(node.style != undefined) { //remove property of border node.style.removeProperty("border"); } //add each child of node to list for processing. effectively recursive for(j = 0; j < node.children.length; j ++) { nodesToVisit.push(node.children[j]); } } } document.body.appendChild(div); }

 <html> <body onload="load()"> </body> </html>

這只是一個演示頁面，可在div中動態加載，但這將適用於所有元素，而不僅僅是div。

Answer 2

您也可以使用CSS

假設您在作用域中有一個html變量，並且以這種方式綁定它

<div ng-bind-html="html"></div>

只需將其與具有類strip-borders的div環繞即可

<div class="strip-borders">
    <div ng-bind-html="html"></div>
</div>

然后添加以下類以除去邊框div

.strip-borders div {
    border:none !important;
}

或刪除任何元素的邊框（謹慎使用）

.strip-borders * {
    border:none !important;
}

看到小提琴

http://jsfiddle.net/8vzq9j6p/

Answer 3

您可以通過更改元素的邊框來去除任何元素的所有邊框樣式

.style.border

至

null

例如：

 function stripBorderStyles() { var divs = document.getElementsByTagName('div'); for (var i = 3; i < divs.length; i++) { divs[i].style.border = null; } } window.addEventListener('load',stripBorderStyles,false);

 <h2>Before:</h2> <div style = "background-color:red; border: 1px solid;">Hi there</div> <div style = "background-color:red; border: 2px solid;">Hey there</div> <div style = "background-color:red; border: 3px solid;">Howdy</div> <h2>After:</h2> <div style = "background-color:red; border: 1px solid;">Hi there</div> <div style = "background-color:red; border: 2px solid;">Hey there</div> <div style = "background-color:red; border: 3px solid;">Howdy</div>

Answer 4

您可以使用$ .css（“ background-color”，“”）;

如何從HTML頁面剝離特定樣式？

問題描述

4 個解決方案

解決方案1
1 2015-12-03 18:37:37

解決方案2
1 2015-12-03 18:48:45

解決方案3
1 已采納 2015-12-03 18:56:07

解決方案4
-3 2015-12-03 18:34:38

如何從HTML頁面剝離特定樣式？

問題描述

4 個解決方案

解決方案1 1 2015-12-03 18:37:37

解決方案2 1 2015-12-03 18:48:45

解決方案3 1 已采納 2015-12-03 18:56:07

解決方案4 -3 2015-12-03 18:34:38

解決方案1
1 2015-12-03 18:37:37

解決方案2
1 2015-12-03 18:48:45

解決方案3
1 已采納 2015-12-03 18:56:07

解決方案4
-3 2015-12-03 18:34:38