基本的window.document操作及实例
找元素
1.根据id找
var d1 = document.getElementById("d1");
alert(d1);
2.根据class找
var d2 = document.getElementsByClassName("d");
alert(d2[1]);
3.根据标签名找
var d3 = document.getElementsByTagName("div");
alert(d3[0]);
4.根据name找
var d4 = document.getElementsByName("aa");
alert(d4[0]);
操作元素
操作内容
非表单元素
var d1 = document.getElementById("d1");
1.获取文本
alert(d1.innerText);
2.设置文本
d1.innerText = "hello";
3.获取html代码
alert(d1.innerHTML);
4.设置html代码
d1.innerHTML = "<b>加粗文字</b>";
表单元素
var b1 = document.getElementById("b1");
1.赋值
b1.value = "ceshi";
2.获取值
alert(b1.value);
操作属性
1.添加属性
var d1 = document.getElementById("d1");
d1.setAttribute("bs","1");
2.获取属性
alert(d1.getAttribute("cs"));
3.移除属性
d1.removeAttribute("cs");
操作样式
function showa()
{
1.获取样式,只能获取内联样式
var d3 = document.getElementById("d3");
alert(d3.style.color);
}
function set()
{
var d3 = document.getElementById("d3");
2.设置样式
d3.style.backgroundColor = "red";
}
注册按钮选中可使用：
<input type="checkbox" />同意
<input type="button" value="注册" disabled="disabled" />
JS程序：
function xiugai()
{
//找到复选框
var ck = document.getElementById("ck");
//找到按钮
var btn = document.getElementById("btn");
//判断复选框的选中状态
if(ck.checked)
{
//移除按钮的不可用属性
btn.removeAttribute("disabled");
}
else
{
//设置不可用属性
btn.setAttribute("disabled","disabled");
}
}
鼠标选中背景文字颜色改变：
Css样式：<style type="text/css">
#caidan{
width:500px; height:35px; border:1px solid #60F;
}
.xiang{
width:100px;
height:35px;
text-align:center;
line-height:35px;
vertical-align:middle;
float:left;
}
</style>
Body程序：
<div>
<div >首页</div>
<div >产品中心</div>
<div >服务中心</div>
<div >联系我们</div>
</div>
JS程序：
function huan(a)
{
//将所有的项恢复原样式
var d = document.getElementsByClassName("xiang");
for(var i=0;i<d.length;i++)
{
d[i].style.backgroundColor="white";
d[i].style.color = "black";
}
//换该元素的样式
a.style.backgroundColor = "red";
a.style.color = "white";
}
倒计时结束按钮可点击：
<span>10</span>
<input disabled="disabled" type="button" value="注册" />
</div>
JS程序：
<script type="text/javascript">
window.setTimeout("daojishi()",1000);
//功能：倒计时减1
function daojishi()
{
//找到span
var s = document.getElementById("daojishi");
//判断
if(parseInt(s.innerHTML)<=0)
{
document.getElementById("anniu").removeAttribute("disabled");
}
else
{
//获取内容，，减1之后再交给span
s.innerHTML = parseInt(s.innerHTML)-1;
//每隔一秒调一次该方法
window.setTimeout("daojishi()",1000);
}
}
</script>
基本的window.document操作及实例