Dom第五天学习总结

1.    控制层的显示

    修改style.display  例子：切换层的显示

        function togglediv(){

            var div1 = document.getElementById('div1');

            if(div1.style.display == ''){

                div1.style.display = 'none';        //不显示

            }else{

                div1.style.display = '';            //显示

            }

        }

    与元素对象enable = true或readonly = true等不一样，

    这里是样式，不是元素的直接属性，不能用true或false

    

    如果是嵌入样式表，即style写在元素内，那么.style.display可以取到这个值

    如果是内联样式表，即<style>div{display:none;}</style>，那么取不到这个值

    应该怎么办？

    dvObj.style.display = (dvObj.style.display.length == 0)?'none':'';

    

    

    案例：按钮、checkbox，一般想到的都是onchange事件

    （使用按钮的click事件，可以避免使用onchange事件）

    

2.    动态设置元素的位置、大小

    通过Dom读取元素的top left width height等取到的值不是数字，而是"10px"这样的字符串；

    为这些属性设值得时候：

    IE可以是80，90这样的数字

    FF Chrome 需要是"80px" "90%"等这样的字符串形式

    为了兼容统一用字符串形式，left/top需要设置为position

    

    易错：不要写成div1.style.width = 80px,

    正确：div1.style.width = '80px';

    

    如果要修改元素的大小（宽度加1），则首先要取出元素的宽度，然后用parseInt将宽度转化为数字，

    （parseInt能够将"20px"这样数字开头的包含其他内容的字符串解析成20）

    之后加上一个值，再加上px赋值回去

    

3.    IE中Body的事件范围

    IE中如果在body上添加onclick onmouseover等事件响应，

    那么如果页面没有满，则”body中最后一个元素以下（横向不限制）”的部分是无法响应事件的，

    必须使用代码在document上监听那些事件，比如document.onmouseover = Movepic

    即 document.body.onmouseover和document.onmouseover

    如果为整个文档注册事件可用：document.onxxxx事件

4.    层的操作

    元素的position样式值：

    static：无定位，显示在默认位置

    absolute：绝对定位

    fixed：相对于窗口的固定定位，位置不会随着浏览器的滚动而变化，IE6不支持

    relative：相对元素默认位置的定位

    如果要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top和left两个样式值

    left和top都是相对于层的左上角的坐标

    

5.    自定义属性

    外部添加属性的方法--setAttribute

    获取属性--getAttribute

    通过为元素添加属性，可以实现需要信息的跨函数传递

    imObj.setAttribute('keyUser', key);

    把key作为属性值存起来 之后在需要的时候在get出来

    

6.    问题

    易错：

    1）不要写成div1.style.width = 80px; 而是div1.style.width = '80px';

    2）修改元素的样式不能this.style = "background-color:Red"，哪怕可以的话也是把以前所有样式

    都冲掉了。单独修改控件的样式this.style.backgroundColor = 'red';只修改要修改的样式

    

7.    css style中有一个属性 z-index:1000 说明该元素在所有层的最前面

    鼠标进入控件事件-- onmouseover

    鼠标离开控件事件-- onmouseout

    控件获得焦点     -- onfocus

    焦点离开鼠标     -- onblur

    

8.    form对象

    如果把form的onsubmit事件return false，会影响其中submit按钮的onclick事件

    但是不会影响其自身的submit()方法

    （form自身的submit()是提交表单，但是不会触发onsubmit事件）

    

    实现自动autopost，也就是焦点离开控件以后页面立即提交，而不是只有提交submit按钮以后才提交

    方法是：当光标离开的时候触发onblur事件，在onblur中调用form的submit方法

    

    在点击submit按钮后form的onsubmit事件被触发，在onsubmit中可以进行数据校验

    如果数据有问题，返回false即可取消提交

    

    <form name = "form1" action = "a.aspx" method = "get"

        onsubmit = "if(document.getElementById('txtname').value.length < 0)

        {alert('姓名必填)；return false;}"

    

9.    不同浏览器的差异

    面试题：说说开发项目的时候不同浏览器的不同点，你是怎么解决的？

    不同浏览器对Dom支持的方法不一样

        IE--innerText  FF--textContent

    不同浏览器对CSS支持不一样

    

    JQuery之类的框架进行了封装，将不同浏览器的差异帮开发人员处理了，

    开发人员只要调用JQuery的方法，JQuery会帮助在不同浏览器中进行翻译。

    用JQuery就可以解决不同浏览器上Dom的不同

    

    CSS的不同的处理是美工的工作