文本转换：大写和镀铬答案

【问题标题】：text-transform: uppercase and chrome文本转换：大写和镀铬
【发布时间】：2020-05-29 19:41:05
【问题描述】：

我在 Google Chrome 中有一种情况，我的 css 的 text-transform: uppercase 直接更改了元素的 innerText。突变事件由父 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;
}

&lt;h1 id="docTitle"&gt;xyz&lt;/h1&gt;

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

【问题讨论】：

这是 Firefox 中的一个错误。使用.textContent。见stackoverflow.com/a/35213639/8898840
虽然现在我尝试了您的代码，但它在 Chrome 和 Firefox 中的行为相同。
我修复了Uncaught TypeError: Failed to construct 'MutationObserver': The callback provided as parameter 1 is not a function.的sn-p代码错误；它使用的是严格模式，如果我没记错的话，所以 changeDocumentTitle 是未定义的，因为它在声明之前就被使用了。
innerText 与渲染有关（例如，它还排除了某些类型的隐藏文本）。就像 Guy Incognito 所说，使用 textContent 获取实际文本。
@HereticMonkey 如果您更改了控制台检查器中的文本，则不会触发任何事件。如果你这样做 document.getElementById("docTitle").innerText = "foo" 它可以工作。

标签： javascript html css google-chrome

【解决方案1】：

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

【讨论】：