zoukankan html css js c++ java

火狐不支持innerText的解决办法

例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dance styles</title>
</head>

<body>
<div >
<p>
Dance Styles (choose)
<input type="text" name="Dance Styles" id="DanceStyles" style="255px;" /></p>
<div class="choose">
  <p><a onclick= "DanceStyles.value=innerText " style=" cursor:pointer;">Ballet</a></p>
<p><a onclick= "DanceStyles.value=innerText " style=" cursor:pointer">Contemporar</a></p>
<p><a onclick= "DanceStyles.value=innerText " style=" cursor:pointer">Jazz</a></p>
<p><a onclick= "DanceStyles.value=innerText " style=" cursor:pointer">Street Jazz</a></p>
<p><a onclick= "DanceStyles.value=innerText " style=" cursor:pointer">Hip Hop</a></p>
<p><a onclick= "DanceStyles.value=innerText " style=" cursor:pointer">Tap</a></p>
<p><a onclick= "DanceStyles.value=innerText " style=" cursor:pointer">Ballroom</a></p>
<p><a onclick= "DanceStyles.value=innerText " style=" cursor:pointer">Latin</a></p>
<p><a onclick= "DanceStyles.value=innerText " style=" cursor:pointer">Belly</a></p>
</div>
</div>
</body>
</html>

以上这个采用了innerText来获取文字的代码，在火狐中是失效的。

但是如果加上一段JavaScript:

<script type="text/javascript">
function innerText(node){//返回的是数组类型
                var innerTextArr = [];
                var root = document.getElementById(node);
                var getChild = function(node){
                        var childs = node.childNodes;
                        for(var i=0;i<childs.length;i++)
                                if(childs[i].nodeType == 3)
                                        innerTextArr.push(childs[i].nodeValue);
                                else if(childs[i].nodeType == 1){
                                        getChild(childs[i]);
                                }
                }
                getChild(root);
                return innerTextArr;
        }
</script>

就使得innerText也起作用了。

还有一个同样功效用来支持outerHTML的JS函数：

View Code

function outerHTML(node){//返回的是字符串类型
                                var tag = document.getElementById(node).tagName;
                                var outerHTMLStr = "<" + tag.toLowerCase();
                                var atts = document.getElementById(node).attributes;
                                for(var i = 0;i<atts.length;i++)
                                                outerHTMLStr += " " + atts[i].name + "=\"" + atts[i].value + "\"";
                                outerHTMLStr += ">";
                                outerHTMLStr += document.getElementById(node).innerHTML;
                                outerHTMLStr += "<" + tag.toLowerCase() + ">"
                                return outerHTMLStr;
                }

否则的话，只要把所有的innerText都换成innerHTML就可以直接让火狐支持，而不需要额外的函数。

像这样：

<div >
<p>
Dance Styles (choose)
<input type="text" name="Dance Styles" id="DanceStyles" style="255px;" /></p>
<div class="choose">
  <p><a onclick= "DanceStyles.value=innerText " style=" cursor:pointer;">Ballet</a></p>
<p><a onclick= "DanceStyles.value=innerHTML " style=" cursor:pointer">Contemporar</a></p>
<p><a onclick= "DanceStyles.value=innerHTML " style=" cursor:pointer">Jazz</a></p>
<p><a onclick= "DanceStyles.value=innerHTML " style=" cursor:pointer">Street Jazz</a></p>
<p><a onclick= "DanceStyles.value=innerHTML " style=" cursor:pointer">Hip Hop</a></p>
<p><a onclick= "DanceStyles.value=innerHTML " style=" cursor:pointer">Tap</a></p>
<p><a onclick= "DanceStyles.value=innerHTML " style=" cursor:pointer">Ballroom</a></p>
<p><a onclick= "DanceStyles.value=innerHTML " style=" cursor:pointer">Latin</a></p>
<p><a onclick= "DanceStyles.value=innerHTML " style=" cursor:pointer">Belly</a></p>
</div>
</div>

查看全文

相关阅读:
delphi 获取图片某一像素的颜色值
 delphi常用快捷键（我自己经常使用的）
115.css的initial、inherit、unset
菜鸡前端的配色记录-echart比较好看的配色
 114.关于前端的vertical-align详解
 Problem
Oracle从入门到入门的学习历程
 使用navicat连接oracleXE
使用ElementUI遭遇问题记录
 SonarQube遇见的问题

原文地址：https://www.cnblogs.com/haimingpro/p/2673270.html