正文
用自定义getElementByClassName函数做“查看更多”的特效
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html>
<head>
<title>查看更多</title>
<meta charset="utf-8">
<style type="text/css">
button {
display:block;
} a {
margin-top:60px;
text-decoration:none;
color:#2D5A87;
display:block;
} div {
margin:auto;
width:200px;
} p {
font-size:13px;
} .none {
display:none;
}
</style>
</head>
<body>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p class="none"></p>
<p class="none"></p>
<button id="watchmore">查看更多</button>
<a href="../js project.html">返回主界面</a>
</div> <script type="text/javascript"> function getElementsByClassName (className) {
var all = document.getElementsByTagName('*');
var elements = new Array();
for (var e = ; e < all.length; e++) {
if (all[e].className == className) {
elements[elements.length] = all[e];
break;
}
}
return elements;
} window.onload = function(){
var watch = document.getElementById('watchmore');
var op =document.getElementsByClassName('none');
watch.onclick = function(){
if(watch.innerHTML == "查看更多"){
for(var i=; i<op.length; i++){
op[i].style.display = "block";
watch.innerHTML = "隐藏";
}
}
else {
for(var i=; i<op.length; i++){
op[i].style.display = "none";
watch.innerHTML = "查看更多";
}
}
}
} </script>
</body>
</html>
