有没有办法从删除斜体样式

Question

我想让<i>标签中的文本在 contenteditable div 中不显示为斜体。

但是，正如您在下面的代码片段中所看到的，如果我将font-style:normal添加到斜体样式，则document.execCommand('italic')不再有效，因为浏览器正确地检测到文本不是斜体。

有什么办法可以同时拥有统一的<i>和统一的方法吗？

 function italicize(){ document.execCommand("italic"); }

 i{ font-style:normal; color:red; }

 <div contenteditable=true>a<i>b</i>c</div> <button onclick=italicize()>italic</button>

Answer 1

 function italicize() { let myDiv = document.querySelector("#myDiv"); myDiv.style.fontStyle.localeCompare("italic") ? myDiv.style.fontStyle = "italic" : myDiv.style.fontStyle = "normal"; }

 i { font-style: normal; color: red; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="myDiv" contenteditable=true>a<i>b</i>c</div> <button onclick="italicize()">italic</button> </body> </html>

这是你想要的？ #newToStackOverflow

Answer 2

一种方法是创建一个特定的样式规则，从<div>内的所有<i>元素中删除默认的斜体样式。

然后，使用querySelectorAll您可以定位所有位于<div contenteditable="true">属性内的<i>并通过切换类使文本斜体：

 function italicize() { let contentDivs = document.querySelectorAll('[contenteditable="true"] > i') for (let div of contentDivs) { div.classList.toggle('add-italic'); } }

 div > i { font-style: normal; color: red; } .add-italic { font-style: italic; }

 <div contenteditable="true">a<i>b</i>c</div> <button onclick="italicize()">italic</button>

Answer 3

此问题的更多解决方案。

使用 innerText 更改节点

 function unitalicize(){ var element = document.getElementsByTagName("i")[0]; var span = document.createElement("span"); while(element.firstChild){ span.appendChild(element.firstChild); } element.parentElement.replaceChild(span,element) } function italicize(){ var element = document.getElementsByTagName("span")[0]; var i = document.createElement("i"); while(element.firstChild){ i.appendChild(element.firstChild); } element.parentElement.replaceChild(i,element) }

 i{ color:red; }

 <div contenteditable=true>a<i>b</i>c</div> <button onclick=unitalicize()>unitalicize()</button> <button onclick=italicize()>italicize()</button>

有没有办法从删除斜体样式

问题描述

3 个解决方案

解决方案1
0 2020-02-14 15:06:49

解决方案2
0 2020-02-14 15:07:12

解决方案3
0 2020-02-14 15:15:31

使用 innerText 更改节点

有没有办法从删除斜体样式

问题描述

3 个解决方案

解决方案1 0 2020-02-14 15:06:49

解决方案2 0 2020-02-14 15:07:12

解决方案3 0 2020-02-14 15:15:31

使用 innerText 更改节点

解决方案1
0 2020-02-14 15:06:49

解决方案2
0 2020-02-14 15:07:12

解决方案3
0 2020-02-14 15:15:31