Doc15(层的显示和隐藏及超链接显示图片)

来源：互联网发布：傲梦青少年编程编辑：程序博客网时间：2024/05/16 15:44

层的显示和隐藏

关键词: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

0 0