使用JavaScript在焦点变化时改变contenteditable div元素的边框

Question

我正在使用 JavaScript 处理可编辑的 div 元素。

 var div = document.getElementById('htmlelement');
 var ele = document.createElement('div');
 ele.setAttribute('id','inputelement');
 ele.style.display = 'inline-block';
 ele.style.border = 'none';
 ele.style.minHeight = '100px';
 ele.style.maxHeight = '100px;'
 ele.style.padding = '10px';
 ele.style.fontSize = '12px';
 ele.style.color = 'blue';
 ele.setAttribute('contentEditable','true');
 div.appendChild(ele);
 ele.focus();

现在，当焦点集中在div区域时，黑色边框会自动显示出来。 我想要移除或更改该边框颜色，但我认为CSS不起作用，因为div元素是由JavaScript动态创建的。

有没有办法可以移除这个黑色边框或者更改它的颜色？

我尝试使用CSS，但由于元素是动态创建的，所以不起作用，如下：

[contenteditable] {
   outline: 0px solid transparent;
}

- Manoj

---

CSS 始终发挥作用，不论是动态创建的还是静态的。 - Jeremy Thille

假设选择器正确地针对了相应的元素（或元素），继续根据Jeremy的评论进行操作。 - David Thomas

你的代码中还有一个拼写错误。ele.style.fontSize = '12px'' 应该改为 ele.style.fontSize = '12px';。 - Reyno

但是我想根据条件改变边框颜色，这有可能吗？比如我想将边框颜色改为蓝色，并且当鼠标悬停在div外部时，我希望div的边框变为透明，而在焦点状态下显示边框。 使用JavaScript不可以实现吗？ - Manoj

Answer 1

当你谈论“边框”时，你是指“轮廓线”吗？你可以将其设置为none。

var div = document.getElementById('htmlelement');

var ele = document.createElement('div');
ele.id = 'inputelement';
ele.style.display = 'inline-block';
ele.style.border = 'none';
ele.style.minHeight = '100px';
ele.style.maxHeight = '100px;';
ele.style.padding = '10px';
ele.style.fontSize = '12px';
ele.style.color = 'blue';
ele.setAttribute('contentEditable', 'true');
div.appendChild(ele);
ele.focus();

div[contenteditable] {
  outline: none;
}

<div id="htmlelement"></div>

- chrwahl

---

我做了同样的事情，但对于由JavaScript创建的元素却没有起作用，有没有JavaScript的解决方案？ - Manoj