Javascript浏览器兼容性问题之一-------textContentt和innerText


innerText属性用来定义对象要输出的文本,具体用法如下:

 1 <!DOCTYPE>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <script>
 5 window.onload = function()
 6 {
 7     var oTxt = document.getElementById('sp');
 8     oTxt.innerText = "hello";
 9 }
10 </script>
11 </head>
12 
13 <body>
14 <span id = "sp"></span>
15 </body>
16 </html>

这时候,span标签里的内容为“hello”,问题在于,这段代码在IE下运行良好,但是在火狐下却没有任何显示。这是因为innerText的兼容性问题,它在FireFox下是不兼容的,在FireFox下,我们可以使用textContent代替innerText。上述代码要想在火狐下顺利运行,只需将script标签里的代码改为:

 1 window.onload = function()
 2 {
 3     var oTxt = document.getElementById('sp');
 4     
 5     if(oTxt.innerText)
 6     {
 7         oTxt.innerText = "hello";
 8     }
 9     else
10     {
11         oTxt.textContent = "hello";
12     }
13 }

下附淘宝评星功能的代码,其中包含textContent和innerText的兼容性问题,以及cursor:hand与cursor:pointer的兼容性问题。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script language="JavaScript" type="text/javascript">        
 6         function star(n)
 7         {
 8             var array=new Array();
 9             array[0]=document.getElementById("oneStar");
10             array[1]=document.getElementById("twoStar");
11             array[2]=document.getElementById("threeStar");
12             array[3]=document.getElementById("fourStar");
13             array[4]=document.getElementById("fiveStar");
14             
15             for(var i=0;i<=n;i++)
16             {
17                 if(array[i].innerText)
18                 {
19                     array[i].innerText="★";
20                 }else
21                 {
22                     array[i].textContent = "★";
23                 }
24             }
25             for( var j=4;j>n;j--)
26             {
27                 if(array[j].innerText)
28                 {
29                     array[j].innerText="☆";
30                 }else
31                 {
32                     array[j].textContent="☆";
33                 }
34             }    
35             if(document.getElementById("evaluate").innerText)
36             {
37                 document.getElementById("evaluate").innerText="您的评价是"+(n+1)+"星";
38             }else
39             {
40                 document.getElementById("evaluate").textContent="您的评价是"+(n+1)+"星";
41             }
42         }
43     </script>
44     <title>评星</title>
45 </head>
46 <body>
47 <strong>请您对我们作出评价:</strong>
48 <span id="star">
49     <span style="cursor:pointer" onclick="star(0)"id="oneStar" >☆</span>
50     <span style="cursor:pointer " onclick="star(1)" id="twoStar" >☆</span>
51     <span style="cursor:pointer " onclick="star(2)" id="threeStar" >☆</span>
52     <span style="cursor:pointer " onclick="star(3)" id="fourStar" >☆</span>
53     <span style="cursor:pointer" onclick="star(4)" id="fiveStar" >☆</span>
54 </span><span id="evaluate"></span>
55 
56 </body>
57 </html>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM