获取元素对象的方法:
1document.getElementById() 按元素的ID名称来访问
2document.getElementsByName() 按元素的name名称来访问
3getElementsByTagName() 按标签来访问
2
元素对象改变样式
Obj.style.width=“100px”;
Obj.style.color=“#f00”;
Obj.style.marginTop=“10px”;
Obj.stlye.lineHeight=“24px”
Obj.style=“color:red;line-height:24px”;
object.style.visibility="值"
hidden的位置还在
none的位置不在
//三级导航的下拉列表
令狐冲
东方不败
var lis = document.getElementsByTagName("li");
for(var i = 0;i <= lis.length-1;i++){
lis[i].onmouseover = function(){
var u = this.getElementsByTagName("ul")[0];
if(u != undefined){ //不管一级二级还是三级 只要它里面有子元素ul确实存在
u.style.display = "block"; //就让他显示
}
}
lis[i].onmouseout = function(){
var u = this.getElementsByTagName("ul")[0];
if(u != undefined){ //不管一级二级还是三级 只要它里面有子元素ul确实存在
u.style.display = "none"; //就让他显示
}
}
}
//
我最喜欢的水果：
苹果桔子荔枝香蕉凤梨
全选全不选反选
单选var oi = document.getElementsByTagName("input");
var btn =document.getElementsByTagName("button");
//全选
btn[0].onclick = function(){
for(var i = 0;i < oi.length-1;i++){
oi[i].checked = true;
}
// oi[0].checked = "checked";
}
//全不选
btn[1].onclick = function(){
for(var i = 0;i < oi.length - 1;i++){
oi[i].checked = false;
}
// oi[0].checked = "";
}
//反选
btn[2].onclick = function(){
for(var i = 0; i <= oi.length - 2;i++){
if(oi[i].checked == true){
oi[i].checked = false;
}else{
oi[i].checked = true;
}
}
}
//单选
btn[3].onclick = function(){
var num = parseInt(oi[oi.length-1].value);
btn[1].onclick();
if(num > 5 || num < 1 || isNaN(num)){
alert("请输入有效的数字");
}else{
oi[num-1].checked = true;
}
}
//类的添加与删除
hello
var oD = document.getElementById("box");
// alert(oD.id)
// alert(oD.className);//元素对象.className 获取元素对象上的class的值
oD.className = oD.className + " red bg";//设置类名 元素对象.className = "类名1 类名2 。。。。。"
网友评论