<style type="text/css"> #d3{ color:red} </style> </head> <body> <div id="d1" cs="ceshi"><span>document对象</span></div> <div class="d">111</div> <span class="d">222</span> <input type="text" name="aa" id="b1" value="biaodan" /> <input type="text" name="aa" /> <div id="d3" style="100px; height:100px; background-color:#636">111</div> <input type="button" value="获取" onclick="showa()" /> <input type="button" value="设置" onclick="set()" /> </body> <script type="text/javascript">
//找元素
//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";
}*/
<div onclick=""></div> 鼠标单击
<div ondblclick=""></div> 鼠标双击
<div onkeydown=""></div> 键敲下
<div onkeypress=""></div> 键敲击
<div onkeyup=""></div> 键敲击后抬起
<div onmousedown=""></div> 鼠标点击下
<div onmousemove=""></div> 鼠标移动
<div onmouseout=""></div> 鼠标离开
<div onmouseover=""></div> 鼠标悬浮上边
<div onmouseup=""></div> 鼠标点击抬起
例一；
<body> <input type="checkbox" id="ck" onclick="xiugai()" />同意 <input type="button" value="注册" id="btn" disabled="disabled" /> </body> <script type="text/javascript"> function xiugai() { //找到复选框 var ck = document.getElementById("ck"); //找到按钮 var btn = document.getElementById("btn"); //判断复选框的选中状态 if(ck.checked) { //移除按钮的不可用属性 btn.removeAttribute("disabled"); } else { //设置不可用属性 btn.setAttribute("disabled","disabled"); } } </script>
例2；
<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> </head> <body> <div id="caidan"> <div class="xiang" onmouseover="huan(this)" >首页</div> <div class="xiang" onmouseover="huan(this)" >产品中心</div> <div class="xiang" onmouseover="huan(this)" >服务中心</div> <div class="xiang" onmouseover="huan(this)" >联系我们</div> </div> </body> <script type="text/javascript"> 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"; } /*function huifu(a) { a.style.backgroundColor = "white"; a.style.color = "black"; }*/ </script>
例3：
<body> <div> <span id="daojishi">10</span> <input disabled="disabled" type="button" value="注册" id="anniu" /> </div> </body> <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>