Есть ли способ удалить стиль itali c из тега <i>без влияния document.execCommand ("itali c") - PullRequest
Новая
       68

Есть ли способ удалить стиль itali c из тега <i>без влияния document.execCommand ("itali c")

0 голосов
/ 14 февраля 2020

Я бы хотел, чтобы текст в теге <i> не отображался itali c в contenteditable div.

Однако, как вы можете видеть из фрагмента кода ниже, если я добавлю font-style:normal в итальянском стиле c, document.execCommand('italic') для отмены инициализации больше не работает, так как браузер правильно обнаруживает, что текст не является итальянским c.

Был бы какой-либо способ иметь оба unitali c - ищите <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>

Ответы [ 3 ]

0 голосов
/ 14 февраля 2020

Один из способов сделать это может быть путем создания определенного правила стиля c, которое удаляет стиль по умолчанию itali c из всех элементов <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>
0 голосов
/ 14 февраля 2020

Больше решений для этой проблемы.

Изменить узел с помощью 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>
0 голосов
/ 14 февраля 2020 

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

...