text-transform：大写和镶边

Posted 2021-05-03

我在Google Chrome浏览器中遇到了一种情况，该元素的innerText被我的CSS的text-transform: uppercase直接更改。突变事件是通过在父div上与contenteditable之间的切换来触发的。

innerText最初是“ xyz”，但是在切换之后，element.innerText返回“ XYZ”（innerhtml中仍然是xyz）。

let doct = document.getElementById("docTitle");

var changeDocumentTitle = function(e) {
  console.log('changeDocumentTitle: ' + document.getElementById("docTitle").innerText);
};

//  TODO: code for using mutation observer. Works in Firefox, ends up capitalizing the title in google
var observer = new MutationObserver(changeDocumentTitle);
var config = {
  attributes: true,
  childList: true,
  subtree: true
};
observer.observe(doct, config);

#docTitle {
  display: block;
  font-size: 32px;
  font-weight: 900;
  color: inherit;
  margin: 0.67em 0;
  page-break-after: avoid font-family: Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
}

<h1 id="docTitle">xyz</h1>

我在Chrome中看到了这个，但在Firefox中看不到。这是Chrome中的错误吗？有解决方法吗？我想到只是尝试从.innerHTML中剥离html标记部分...这是我最好的选择吗？

答案

[Guy Incognito在他的第一条评论中回答了这个问题，指出我不正确地使用了.innerText，并且我应该使用（现在正在使用）.textContent来获取元素的-er-text内容。