DOM(15)——层的操作

1、元素的position 样式值：

• static（无定位，显示在默认位置）、
• absolute（绝对定位，相对于浏览器来说）、
• fixed（相对于窗口的固定定位，位置不会随着浏览器的滚动而变化，IE6不支持）、
• relative（相对元素默认位置的定位，跟上一个元素之间的相对位置，当上一个元素的位置发生改变时也会跟着改变）。

如果要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top（上边缘距离）、left（左边缘距离）两个样式值。left、top都是指的层的左上角的坐标。

2、案例：跟着鼠标飞的图片。提示：鼠标移动的事件是onmousemove（一边移动事件一边触发，而不是移动开始或者移动完成才触发），通过window.event的clientX、clientY属性获得鼠标的位置。

3、案例：放三个超链接，鼠标放上时候动态生成一个层，层显示在鼠标的位置，鼠标离开的时候移除该层removeChild 。

4、案例：点击按钮层动态变大。提示：英文字母连续单词不会在中间自动换行的陷阱。

• 强制换行 word-break:break-all;
• 适应大小（超过时出现滚动条） overflow:scroll

（1）点击按钮层变大：

<div id="testDiv" style="position:absolute;width:0px;height:0px;top:100px;height:100px">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈爱好哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈爱好哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
<input type="button" value="show" onclick="document.getElementById('testDiv').style.width=200;document.getElementById('testDiv').style.height=20;" />
           

（2）点击按钮层动态变大：

<script type="text/javascript">
        var slideShowIntervalId;
        
        function slideShow() {
            var testDiv = document.getElementById('testDiv');
            var hasChange = false;
            var oldWidth = parseInt(testDiv.style.width, 10);
            var oldHeight = parseInt(testDiv.style.height, 10);
            if (oldWidth <= 200) {
                testDiv.style.width =( oldWidth+10)+"px";
                hasChange = true;
            }
            if (oldHeight <= 20) {
                testDiv.style.height = (oldHeight+1)+"px";
                hasChange = true;
            }
            if (!hasChange) {
                clearInterval(slideShowIntervalId);
            }
        }
    </script>
<div id="testDiv" style="position:absolute;width:0px;height:0px;top:100px;height:100px;border-color:Green;border-style:dotted;border-width:1px;">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈爱好哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
<input type="button" value="缓慢显示" onclick="slideShowIntervalId=setInterval('slideShow()',100)" />
           

5、动态添加、删除表单元素：

document.body.appendChild(div); //动态添加表单元素div

document.body.removeChild(div); //动态删除表单元素div

6、易错：不要写成div1.style.width=80px，而是div1.style.width='80px' 。

7、修改元素的样式不能this.style="background-color:Red"，哪怕可以的话也是把以前所有样式都冲掉了。单独修改控件的样式this.style. background='red'，只修改要修改的样式。

技巧：没有文档的情况下的值属性名，随便给一个元素设定id，然后在js中就能id.style.出来能用的属性。

8、createElement的两种用法，注意innerText的问题。

var input = document.createElement("<input type='button' value='hello'/>")快速创建元素，并且赋值，但是注意设置的inner部分不会被设置var link = document.createElement("<a href='http://www.baidu.com'>百度</a>")

9、setAttribute 和 getAttribute

label.setAttribute("for", "username"); //设定一些Dom元素属性名特殊的属性,label.for = "username"会有问题。
label.setAttribute("xuehao","33333")
           

setAttribute 设定一些Dom元素属性名特殊的属性；

getAttribute 获取一些Dom元素属性名特殊的属性。

========================================================

10、练习：点击【登录】按钮，弹出一个显示用户名、密码等的层。将用户名、密码等写到一个层中，层默认是隐藏的，点击【登录】超链接以后将层显示出来，如果点击层中的关闭按钮，则隐藏层。

11、练习：一幅图片。点击小图，弹出一个层在点击的位置显示小图对应的大图，并且显示姓名、身高等信息，点击层中的关闭按钮关闭层。

12、评分控件V2。用UL实现评分控件，当li的onmouseover触发则显示之前的五角星为★，之后的五角星为☆ 。

13、练习：界面上有几个球队名字的列表，将鼠标放到球队名字上就变为红色背景，其他球队背景颜色为白色，点击一个球队的时候就将点击的球队变为fontSize=30字体。

14、练习：显示数字时钟，时间显示到一个div中。思路：。

15、练习：有一个搜索文本框，焦点不在文本框中的时候，如果文本框没有值，则文本框中显示灰色文本（Gray）的“输入搜索关键词”，否则显示用户输入的值；焦点在文本框中时如果之前显示“输入搜索关键词”则清空文本框的值，并且将文本修改为黑色。onfocus的时候如果文本框中的值为“输入搜索关键词”，则清空文本框，并且恢复文本框的颜色为Black；onblur的时候如果文本框中没有值，则将文本框的值设置为“输入搜索关键词”并且文本框中显示灰色文本（Gray）style.color='Gray'。