利用JavaScript写一个traverse函数，输出所有html页面中宽度和高度大于50像素的节点。
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>统计Element节点</title><scriptlangu...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>统计Element节点</title>
<script language="javascript">
function traverse()
{
var arr=[];
var elements=[];
if(document.all)
{elements=document.all;console.log(1);}
else
{elements=document.getElementsByTagName("*");console.log(2);}
console.log(elements.length);
for(var i=0;i<elements.length;i++)
{
//console.log(elements[i].tagName);
var width=parseInt(elements[i].style.width,10);
console.log(width);
var height=parseInt(elements[i].style.height,10);
console.log(height);
if(width>50&&height>50)
{
arr.push(elements[i]);
}
}
return arr;
}
traverse();
</script>
<style type="text/css">
#demo {
border: #000 2px solid;
background-color: #fff;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>测试</h1>
<table width="100" height="100" border="2" cellpadding="0" cellspacing="0">
<tr>
<td><form name="form1" action="" method="post">
<input type="text" name="ipput1" value="测试">
<br />
<input type="password" name="password" value="">
</form></td>
</tr>
</table>
<div id="demo"> </div>
</body>
</html>
以上是我自己的代码，
有两个问题：
1、我的代码只能输出head内的节点，不能输出body内的节点
2、width和height明明已经用parseint函数转换了，可是我输出这两个值的时候还是输出NaN
请问，我的代码哪里出问题了？谢谢。 展开
<html>
<head>
<meta charset="utf-8">
<title>统计Element节点</title>
<script language="javascript">
function traverse()
{
var arr=[];
var elements=[];
if(document.all)
{elements=document.all;console.log(1);}
else
{elements=document.getElementsByTagName("*");console.log(2);}
console.log(elements.length);
for(var i=0;i<elements.length;i++)
{
//console.log(elements[i].tagName);
var width=parseInt(elements[i].style.width,10);
console.log(width);
var height=parseInt(elements[i].style.height,10);
console.log(height);
if(width>50&&height>50)
{
arr.push(elements[i]);
}
}
return arr;
}
traverse();
</script>
<style type="text/css">
#demo {
border: #000 2px solid;
background-color: #fff;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>测试</h1>
<table width="100" height="100" border="2" cellpadding="0" cellspacing="0">
<tr>
<td><form name="form1" action="" method="post">
<input type="text" name="ipput1" value="测试">
<br />
<input type="password" name="password" value="">
</form></td>
</tr>
</table>
<div id="demo"> </div>
</body>
</html>
以上是我自己的代码，
有两个问题：
1、我的代码只能输出head内的节点，不能输出body内的节点
2、width和height明明已经用parseint函数转换了，可是我输出这两个值的时候还是输出NaN
请问，我的代码哪里出问题了？谢谢。 展开
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>统计Element节点</title>
<script language="javascript">
function traverse() {
var arr = [];
var elements = [];
if (document.all) {
elements = document.all;
} else {
elements = document.getElementsByTagName("*");
}
for (var i = 0; i < elements.length; i++) {
var ele = elements[i];
var width = parseFloat(ele.style.width) || ele.offsetWidth;
console.log(width);
var height = parseFloat(ele.style.height) || ele.offsetHeight;
console.log(height);
if (width > 50 && height > 50) {
arr.push(elements[i]);
}
}
return arr;
}
onload = function() {
console.log(traverse());
}
</script>
<style type="text/css">
#demo {
border: #000 2px solid;
background-color: #fff;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>测试</h1>
<table width="100" height="100" border="2" cellpadding="0" cellspacing="0">
<tr>
<td>
<form name="form1" action="" method="post">
<input type="text" name="ipput1" value="测试">
<br />
<input type="password" name="password" value="">
</form>
</td>
</tr>
</table>
<div id="demo"></div>
</body>
</html>
追问
首先，感谢您的作答。我运行了一下，确实可以正常输出元素的宽高，但是存储结果的数组里面的元素为什么都是undefined呢？如下图所示。麻烦您解答一下，谢谢。
PS:问题我已经找到答案了，问题1，js代码放置的位置不对，放到</body>前面就可以输出所以元素了。
问题2，首先利用width属性得到的就是字符串，如“300px”，然后这里确实也该使用offsetHeight、offsetWidth
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
