DOM 学习笔记3

三十八、Dom修改样式
1、文本框样式修改 失去焦点时候 body onload="initEvent()"
function initEvent(){
var inputs=document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++)
{
var input=inputs[i];
//设置inputOnBlur函数为input元素的onblur事件的响应函数
input.onblur=inputOnBlur;
}
}
function inputOnBlur(){
//inputOnBlur是onblur的响应函数，而不是被响应的调用函数
//所以用this来取得发生事件控件的对象
if(this.value.length<=0)//焦点失去的时候检查数据
this.style.background="red";
else
this.style.background="white";
}
三十九、评分控件练习
<script type="text/javascript">
function msg(){
alert('a');
}
function indexOf(arr,element){
for(var i=0;i<arr.length;i++){
if (arr[i]==element)
return i;
}
return -1;
}

function initEvent(){
//alert(indexOf([1,2,3],3)); //检查indexOf函数
//给所用td添加oncick事件
var tbRating=document.getElementById("tbRating");
var tds=tbRating.getElementsByTagName("td");

for(var i=0;i<tds.length;i++)
{

var td=tds[i];
td.onclick=TdOnClick;
td.style.cursor="pointer";//鼠标变成手的样子

}
}

function TdOnClick(){
var tbRating=document.getElementById("tbRating");
var tds=tbRating.getElementsByTagName("td");//相当于获得兄弟节点
var index=indexOf(tds,this);
for (var i=0;i<=index;i++){
var td=tds[i];
td.style.background="red";
}
for (var i=index+1;i<tds.length;i++){
var td=tds[i];
td.style.background="white";
}
}
</script>

四十一、练习
1、尽量不用全局变量,可以放到一个函数中
2、获取焦点事件 onfocus

四十二、编程控制层
1、显示隐藏层 checkbox 只有失去焦点时才触发
function toggleDiv(cb){
var div1=document.getElementById("div1");
if (cb.checked){
div1.style.display=''; //display没有值就是显示
}
else{
div1.style.display='none'; //none 为不显示
}
}
2、鼠标到超链接显示图片提示
onmouseout 鼠标离开的时候,

function divover(){
document.getElementById("baidudiv").style.display='';
}
function divout(){
document.getElementById("baidudiv").style.display='none';
}
<a href="http://baidu.com" onmouseover="divover()"
onmouseout="divout()">百度</a>

四十五、body事件范围
1、如果body不满页，则再最后一个元素的后面是没有响应的
(如果横向有内容，则横向有响应)
2、解决这个问题可以动态的添加document的事件

四十六、元素单位
1、width:20px 如果不写px在FF中识别出问题
2、parseInt 将字符串转化为数字 注意他会自动识别
例如 123aaa parseInt('123aaa',10)的结果是123
3、DIV自动加宽 div的ID为 div1
function incWidth(){
var oldwidth=document.getElementById("div1").style.width;
var newwidth=parseInt(oldwidth)+50;
document.getElementById("div1").style.width=newwidth+'px';

}
四十八、元素的编程定位
1、元素的position样式值:
static(无定位,显示在默认位置)
absolute 绝对定位
fixed (相对于窗口的固定定位,位置不会随浏览器的滚动而变化,IE6不支持)
relative (相对元素默认位置的定位)
如果要通过代码修改元素的位置一般使用absolute，修改top left

2、onmousemove 一边移动一边触发

function bodyonmousemove(){
var x=window.event.clientX;
var y=window.event.clientY;
var divFly=document.getElementById("divFly");
if (!divFly){
return;
}
divFly.style.left=x;
divFly.style.top=y;
}
doucument.onmousemove=bodyonmousemove;
//body中添加onmousemove="bodyonmousemove()
<div id="divFly" style="position:absolute">
<img src="xiyangyang.gif">
<br/>
喜洋洋
</div>

3、匿名方法格式

document.onclick=function(){
alert('a');
}
4、document.body.removeChild(div); 删除图层
动态创建的Div如果每次都隐藏造成内存溢出 所以用删除图层
动态创建的图层可以添加样式或ID通过样式或ID可以查找到刚才
添加的图层