有没有办法在不影响document.execCommand(" italic ")的情况下从<i>标签中移除斜体样式？
有没有办法在不影响document.execCommand(" italic ")的情况下从<i>标签中移除斜体样式？
提问于 2020-02-14 21:30:18
我想让<i>标签中的文本在可内容编辑的div中不显示为斜体。
但是，正如您在下面的代码片段中看到的那样，如果我将font-style:normal添加到斜体样式，则unitalicize的document.execCommand('italic')将不再起作用，因为浏览器会正确地检测到文本不是斜体。
有没有办法同时拥有统一外观的<i>和使用unitalicize的方法？
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
Stack Overflow用户
发布于 2020-02-14 23:06:49
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
Stack Overflow用户
发布于 2020-02-14 23:07:13
一种方法是创建一个特定的样式规则，该规则从<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>
Stack Overflow用户
发布于 2020-02-14 23:15:31
此问题的更多解决方案。
使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60227321
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号