“innerText”适用于IE,但不适用于Firefox
我有一些在IE浏览器中工作的JavaScript代码,其中包含以下内容:
myElement.innerText = "foo";
但是,似乎'innerText'属性在Firefox中不起作用。 有一些Firefox相当于? 还是有更通用的,可以使用跨浏览器的属性?
Firefox使用符合W3C标准的 textContent属性。
我猜Safari和Opera也支持这个属性。
更新 :我写了一篇博文,详细介绍了所有的差异 。
Firefox使用W3C标准的Node::textContent
,但是它的行为与MSHTML专有的innerText
稍有不同(也被Opera复制,前一段时间还有许多MSHTML特性)。
首先, textContent
空白表示与innerText
不同。 其次,更重要的是, textContent
包含所有的SCRIPT标签内容 ,而innerText不包含。
为了使事情更具娱乐性,除了实现标准的textContent
之外,Opera还决定添加MSHTML的innerText
但将其改为textContent
– 即包含SCRIPT内容(事实上,Opera中的textContent
和innerText
似乎产生了相同的结果,可能只是相互混淆)。
textContent
是Node
接口的一部分,而innerText
是HTMLElement
一部分。 例如,这意味着您可以从文本节点“检索” textContent
而不是innerText
:
var el = document.createElement('p'); var textNode = document.createTextNode('x'); el.textContent; // "" el.innerText; // "" textNode.textContent; // "x" textNode.innerText; // undefined
最后,Safari 2.x也有bug的innerText
实现。 在Safari中, innerText
只有当一个元素既不隐藏(通过style.display == "none"
),也不会从文档中孤立的时候才能正常工作。 否则, innerText
产生一个空string。
我正在玩textContent
抽象(解决这些缺陷),但结果相当复杂 。
你最好打赌是首先确定你的确切的要求,并从那里。 通常可以简单地从元素的innerHTML
中剥离标签,而不是处理所有可能的textContent
/ innerText
偏差。
当然,另一种可能性是遍历DOM树并recursion地收集文本节点。
如果你只需要设置文本内容,而不是检索,这里是一个简单的DOM版本,你可以在任何浏览器上使用; 它不需要IE innerText扩展或者DOM Level 3 Core textContent属性。
function setTextContent(element, text) { while (element.firstChild!==null) element.removeChild(element.firstChild); // remove all existing content element.appendChild(document.createTextNode(text)); }
jQuery提供了一个可以在任何浏览器中使用的.text()
方法。 例如:
$('#myElement').text("Foo");
按照Prakash K的回答,Firefox不支持innerText属性。 因此,您可以简单地testing用户代理是否支持此属性,并按照以下步骤进行操作:
function changeText(elem, changeVal) { if (typeof elem.textContent !== "undefined") { elem.textContent = changeVal; } else { elem.innerText = changeVal; } }
一个非常简单的Javascript脚本可以在所有主要浏览器中获得“非标签”文本…
var myElement = document.getElementById('anyElementId'); var myText = (myElement.innerText || myElement.textContent);
请注意, Element::innerText
属性将不会包含在Chrome浏览器中被CSS样式“ display:none
”隐藏的文本(也会丢弃被其他CSS工艺掩盖的内容(包括font-size: 0,颜色:透明,以及一些其他类似的效果,导致文本不能以任何可见的方式呈现)。
其他CSS属性也被考虑:
- 首先parsing内部元素的“display:”风格,以确定它是否划定块内容(例如“display:block”,这是浏览器内置样式表中HTML块元素的默认值,其行为未被你自己的CSS风格); 如果是这样的话,将在innerText属性的值中插入一个换行符。 textContent属性不会发生这种情况。
- 也会考虑生成内联内容的CSS属性:例如,生成内联换行符的内联元素
<br \>
也会在innerText的值中生成一个换行符。 - “display:inline”风格不会在textContent或innerText中导致换行。
- “display:table”样式在表格和表格行之间生成换行符,但是“display:table-cell”会生成列表字符。
- “position:absolute”属性(用于display:block或display:inline,无所谓)也会导致换行符被插入。
- 一些浏览器还将在跨度之间包含一个单独的空间分隔
但是Element::textContent
仍然包含独立于应用CSS的内部文本元素的所有内容,即使它们是不可见的。 textContent中不会生成额外的换行符或空格,它们只是忽略了所有样式,内部元素的结构和内联/块或定位types。
使用鼠标select的复制/粘贴操作将放弃放置在剪贴板中的纯文本格式的隐藏文本,所以它不会包含textContent
中的所有内容,而只包含innerText
(在生成空白/换行符后以上)。
Google Chrome支持这两个属性,但其内容可能会有所不同。 早期的浏览器仍然包含在innetText中,就像textContent现在所包含的一样(但是它们的行为与空白/新行的生成是不一致的)。
jQuery将解决这些浏览器之间的不一致性,使用“.text()”方法添加到通过$()查询返回的parsing元素中。 在内部,它通过查看HTML DOM来解决困难,只使用“节点”级别。 所以它会返回一些更像标准textContent的东西。
需要注意的是,这个jQuery方法不会插入任何额外的空格或换行符,这些空格或换行符可能在内容的子元素(如<br />
)所导致的屏幕上可见。
如果您devise了一些可访问性的脚本,并且您的样式表被parsing为非听觉呈现(例如用于与盲文读取器通信的插件),则此工具应该使用textContent(如果它必须包含添加了跨度样式的特定标点符号) “display:none”,通常包含在页面中(例如对于上标/下标),否则innerText对盲文阅读器会非常困惑。
CSS技巧隐藏的文本现在通常被主要的search引擎(也将parsing你的HTML页面的CSS,并且也将忽略在背景上不对比的颜色的文本)忽略,使用HTML / CSSparsing器和DOM属性“innerText”就像现代的视觉浏览器一样(至less这个看不见的内容不会被索引,因此隐藏的文本不能被用作强制在页面中包含一些关键字来检查其内容的技巧)。 但是这个隐藏的文本将会在结果页面中显示(如果页面仍然被索引限定为包含在结果中),使用“textContent”属性而不是完整的HTML去除额外的样式和脚本。
如果你在这两个属性中的任何一个中分配了一些纯文本,这将覆盖应用于它的内部标记和样式(只有分配的元素将保持它的types,属性和样式),因此这两个属性将包含相同的内容。 但是,现在有些浏览器不再支持写入innerText,只会覆盖textContent属性(在写入这些属性时不能插入HTML标记,因为HTML特殊字符将使用数字字符引用正确编码,以便逐字显示,如果在innerText
或textContent
赋值之后再读取innerHTML
属性。
myElement.innerText = myElement.textContent = "foo";
编辑(感谢Mark Amery的下面的评论):只有这样做,如果你知道没有代码将依赖于检查这些属性的存在,比如(例如) jQuery 。 但是,如果你使用的是jQuery,那么你可能会使用“text”函数,并且像其他答案一样显示$('#myElement').text('foo')。
innerText
已被添加到Firefox,并应在FF45版本中提供: https ://bugzilla.mozilla.org/show_bug.cgi ? id = 264412
规范草案已经编写完成,预计将在未来纳入HTML生活标准: http : //rocallahan.github.io/innerText-spec/,https: //github.com/whatwg/html/issues/ 465
请注意,目前Firefox,Chrome和IE的实现都是不兼容的。 outlook未来,我们可以预期Firefox,Chrome和Edge会聚,而旧IE仍然不兼容。
另见: https : //github.com/whatwg/compat/issues/5
这样的事情呢?
//$elem is the jQuery object passed along. var $currentText = $elem.context.firstChild.data.toUpperCase();
**我需要把我的大写。
这是我对innerText
, textContent
, innerHTML
和value的经验:
// elem.innerText = changeVal; // works on ie but not on ff or ch // elem.setAttribute("innerText", changeVal); // works on ie but not ff or ch // elem.textContent = changeVal; // works on ie but not ff or ch // elem.setAttribute("textContent", changeVal); // does not work on ie ff or ch // elem.innerHTML = changeVal; // ie causes error - doesn't work in ff or ch // elem.setAttribute("innerHTML", changeVal); //ie causes error doesn't work in ff or ch elem.value = changeVal; // works in ie and ff -- see note 2 on ch // elem.setAttribute("value", changeVal); // ie works; see note 1 on ff and note 2 on ch
ie = Internet Explorer,ff = firefox,ch = google chrome。 注1:ff工作,直到用退格键删除数值 – 请参阅上述Ray Vega的注释。 注2:在chrome中有些作用 – 在更新之后,它不变,然后点击,再次点击字段,数值出现。 最好的是elem.value = changeVal
; 我没有在上面发表评论。
只是在原post的评论下重新发布。 innerHTML适用于所有浏览器。 谢谢stefita。
myElement.innerHTML =“foo”;
就像从2016年的Firefox v45开始, innerText
在firefox上工作,看看它的支持: http ://caniuse.com/#search=innerText
如果你希望它可以在以前的Firefox版本上运行,那么你可以使用textContent
,它在Firefox上有更好的支持,但是在老的IE版本上更糟糕 : http : //caniuse.com/#search=textContent
在这里find这个:
<!--[if lte IE 8]> <script type="text/javascript"> if (Object.defineProperty && Object.getOwnPropertyDescriptor && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) (function() { var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText"); Object.defineProperty(Element.prototype, "textContent", { // It won't work if you just drop in innerText.get // and innerText.set or the whole descriptor. get : function() { return innerText.get.call(this) }, set : function(x) { return innerText.set.call(this, x) } } ); })(); </script> <![endif]-->
也可以在其他浏览器中模拟innerText
行为:
if (((typeof window.HTMLElement) !== "undefined") && ((typeof HTMLElement.prototype.__defineGetter__) !== "undefined")) { HTMLElement.prototype.__defineGetter__("innerText", function () { if (this.textContent) { return this.textContent; } else { var r = this.ownerDocument.createRange(); r.selectNodeContents(this); return r.toString(); } }); HTMLElement.prototype.__defineSetter__("innerText", function (str) { if (this.textContent) { this.textContent = str; } else { this.innerHTML = str.replace(/&/g, '&').replace(/>/g, '>').replace(/</g, '<').replace(/\n/g, "<br />\n"); } }); }