<!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>无标题文档</title>
<style type="text/css">
.font16 {font-size:16px;}
</style>
</head>
<body>
<h1>我是标题1 h1</h1>
<button onclick="h1()">获取h1标签内容</button>
<h2 id="h2">我是标题2 h2</h2>
<button onclick="h2()">获取h2标签内容</button>
<h3 class="h3">我是标题3 h3</h3>
<button onclick="h3()">获取h3标签内容</button>
<h4 class="h3">我是标题4 h4</h4>
<h5><span>我是标题5</span> h5</h5>
<button onclick="h5()">获取h5标签内容</button>
<h6 class="h6">我是标题6 h6</h6>
<button onclick="h6()">设置h6标签样式</button>
<script type="text/javascript">
function h1(){
var h1 = document.getElementsByTagName('h1')[0];
console.log(h1.innerHTML);
}
function h2(){
var h2 = document.getElementById('h2');
console.log(h2.innerHTML);
}
function h3(){
//var h3 = document.getElementsByClassName('h3')[0];
//console.log(h3.innerHTML);
var h3 = document.getElementsByClassName('h3');
for(var i=0;i<h3.length;i++){
console.log(h3[i].innerHTML);
}
}
function h5(){
var h5 = document.getElementsByTagName('h5')[0];
var h5span = h5.getElementsByTagName('span')[0];
console.log(h5span.innerHTML);
}
function h6(){
var h6 = document.getElementsByClassName('h6')[0];
h6.style.color = 'red';
h6.className = 'h6 font16';
}
//可见区域高度
var js_height = document.documentElement.clientHeight;
var jquery_height = $(window).height();
console.log(js_height+','+jquery_height);
</script>
</body>
</html>