层的显示和隐藏
关键词:display
翻译:显示
思路:通过设置层的style下的display属性,改变层的显示效果
实例:
<!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>
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('btnYC').onclick = function () {
document.getElementById('dv').style.display = 'none';
};
document.getElementById('btnShow').onclick = function () {
document.getElementById('dv').style.display = 'block';
}; //其中inline 是缩成一条线了
document.getElementById('btn1').onclick = function () {
alert(document.getElementById('dv').style.display);
if (document.getElementById('dv').style.display.length == 0||document.getElementById('dv').style.display=='block') {
//如果长度为0,则表明为初始状态.
//也就是说在第一轮中,display因为未设置,所以值为'',而在第二轮时,style参数则已经有值.
//如果为初始状态,则赋值玩则为none,在下一轮的判断中,两个值长度都将不为0
//如果是在div标签的style属性中,设置display,那么通过js可以获取到里面的值,如果实在style标签中设置的display值,在js中是获取不到的
document.getElementById('dv').style.display = 'none';
} else {
document.getElementById('dv').style.display = 'block';
}
};
};
</script>
</head>
<body>
<input type="button" name="name" value="隐藏" id='btnYC' />
<input type="button" name="name" value="显示" id='btnShow' />
<input type="button" name="name" value="显示/隐藏" id='btn1' />
<div id='dv' style='width: 300px; height: 200px; background-color: Green; border: 1px solid red'>
</div>
>
</body>
</html>
知识点:因为第一轮style.display未赋值,则其实默认值为”,可以使用第一个条件length判断.
后面赋值后则必须使用display的进行判断.
超链接显示图片
关键字:onmouseover
翻译:鼠标移动到目标上时
思路:设置超链接的onmouseover事件.当发生该事件时,创建一个层,设置层的属性,最后将该层添加到body中.
实例:
<!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>
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('ak').onmouseover = function () {
if (!document.getElementById('dv')) {//js中可以直接判断是否存在
//创建层
var dvObj = document.createElement('div');
dvObj.id = 'dv';
dvObj.style.width = '300px';
dvObj.style.height = '200px';
dvObj.style.backgroundColor = 'green';
dvObj.style.position = 'absolute'; //脱离文档流--脱离文档依次顺序
dvObj.style.left = this.offsetHeight + 'px'; //距离左边像素
//offsetHeight 只是一个值,没有px
//当前超链接的高度,
dvObj.style.top = this.offsetHeight + this.offsettop + 'px';
document.body.appendChild(dvObj);
}
};
};
</script>
<!--<style type="text/css">
div
{
position:absolute;
height:300px;
width:200px;
background-color:Green;
left:200px;
/*第一个position是告诉他可以脱离,这个属性时设置脱离两*/
</style>-->
</head>
<body>
<br style=' background-color:Green' /> <br /> <br /> <br /> <br />
传说中有个神奇的网址,众里寻他千<a id='ak' href="http://www.baidu.com">百度</a>,蓦然回首,那人却在灯火阑珊处
</body>
</html>
知识点:其中创建层使用语句
var dvObj=document.createElement(‘div’);
通过设置dvObj的属性,来告诉浏览器是可以脱离的.然后才可以设置left 及top属性.
其中position的属性必须要设置,不然style.left无法设置.
另外,其中的offsetHeight属性表示自身的高度
offsettop表示距离上端的高度,但是返回的只是数值,需要自己加px