使用innerText更改节点

Question

我想使<i>标记中的文本在内容可编辑的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

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

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

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更改节点

library(ggplot2)
ggplot(data=df, aes(x=dates, y=column1)) + geom_jitter()

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;
}

有没有一种方法可以从<i>标记中删除斜体样式而不影响document.execCommand（“ italic”）

3 个答案:

使用innerText更改节点