Doc15(层的显示和隐藏及超链接显示图片)_doc 文档引入超链接如何展示成图片-CSDN博客

本文链接：https://blog.csdn.net/xbc1213/article/details/50600846

层的显示和隐藏

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