Eri*_*rik 11 html javascript cross-browser innertext
假设我有以下代码:
<html>
<head></head>
<body>
<div id="d">some text</div>
<script type="text/javascript">
var d = document.getElementByid('d');
var innerText = d.innerText || d.textContent;
innerText = 'new text';
</script>
</body>
</html>
我想用id ='d'更改div标签的文本值.不幸的是,上面的块代码不起作用,文本内容不会改变.
如果执行以下配方,它可以工作:
if (d.innerText) d.innerText = 'new text';
else d.textContent = 'new text';
但我不喜欢上面的配方,因为它不紧凑.
你有什么建议为什么第一种方法不起作用？
Gab*_*oli 21
您可以获取属性并使用它,而不是多次分配
var text = ('innerText' in d)? 'innerText' : 'textContent';
d[text] = 'New text';
第一种方法不起作用,因为它所做的只是将变量设置为新值,而不是将值写入元素.这条线
var innerText = d.innerText || d.textContent;
...将变量设置为它找到的text属性innerText的值,它不是对实际属性本身的引用.
你必须做分支,例如:
var d = document.getElementById('d');
var msg = "new text";
if ("innerText" in d) {
d.innerText = msg;
}
else {
d.textContent = msg;
}
这功能检测浏览器是否使用innerText或textContent通过查找属性的元素的存在(这是什么in操作者,检查的对象有一个给定名称的属性,即使该属性为空,null,undefined,等. ).
你甚至可以为自己写一个函数:
var setText = (function() {
function setTextInnerText(element, msg) {
element.innerText = msg;
}
function setTextTextContent(element, msg) {
element.textContent = msg;
}
return "innerText" in document.createElement('span') ? setTextInnerText : setTextTextContent;
})();
这就做了一次特征检测,并返回一个函数,任何半正常的引擎都会为你内联.
或者,如果您希望将消息中的HTML标记作为标记(而不是文本文本)处理,则可以使用innerHTML(在浏览器中保持一致).但同样,如果您使用innerHTML,将处理标记,这可能不是您想要的.
我发现使用一个好的JavaScript库来处理这些浏览器差异(以及提供大量有用的进一步功能)很有用,例如jQuery,YUI,Closure或其他几个.显然,如果没有一个图书馆,你无法做任何事情,这只是站在那些已经做了大量工作的人的肩膀上的问题.:-)
在这种情况下,例如,使用jQuery,上面将是:
$("#d").text("new text");
而已.
| 归档时间： |
|
| 查看次数： |
7562 次 |
| 最近记录： |