版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/happyhaojie/article/details/51596828
e.target是目标对象,如点击事件就是点击的DOM元素。e.target.value就是目标对象的值。
e.event是目标所发生的事件。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>圣诞主题</title>
<link rel='stylesheet' href='common.css' />
</head>
<body>
<section class="container">
<!-- 第一幅画面 -->
<section class="page-a bg-adaptive">
</section>
<!-- 第二幅画面 -->
<section class="page-b bg-adaptive">
</section>
<!-- 第三幅画面 -->
<section class="page-c bg-adaptive">
</section>
</section>
选择页面:
<select id="page">
<option value="page-a" selected="">1</option>
<option value="page-b">2</option>
<option value="page-c">3</option>
</select>
</body>
<script type="text/javascript">
var doc = document;
/**
* 针对content中的html文本框
* 增加rem的修改
* @param {[type]} doc [description]
* @param {[type]} win [description]
* @return {[type]} [description]
*/
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
//自适应设置容器高度
var container = document.querySelector(".container")
//原始比例
var proportion = 900 / 1440;
container.style.height = container.clientWidth * proportion + "px";
};
window.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
/**
* 下拉选择页面
* @type {[type]}
*/
var page = document.querySelector("#page");
//层级
var index = 10;
//切换切换
page.addEventListener("change",function(e){
//页面元素
alert(e.target.value)
var pageElement = document.querySelector("." + e.target.value)
pageElement.style.zIndex = ++index;
},false)
</script>
</html>