javascript dom

来源：互联网发布：js escape编码格式编辑：程序博客网时间：2024/04/30 17:59

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
/*visibility 属性规定元素是否可见*/
h1.visible {visibility:visible}
h1.invisible {visibility:hidden}
h2{
/*display 属性规定元素应该生成的框的类型*/
display:inline;
}
/*none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符*/
.g{
display:none;
}
#b1{
position:absolute;
}
.t{
height:200px;
width:200px;
background:black;
}
</style>

<body onresize="alert('You have changed the size of the window')">
<h1 id="header">Old Header</h1>
<h1 class="visible">这是可见的标题</h1>
<h1 class="invisible">这是不可见的标题</h1>
<h2>样式表把段落元素设置为内联元素</h2>
<h2>而div元素不会显出来</h2>
<div class="g">div元素的内容不会显示出来</div>
<p id="p1">Hello World</p>
<p id="p2" >fowewfwepf fwo</p>

<input id="io" type="button" value="op" onclick="document.getElementById('p2').style.color='yellow'" />

<img id="image" src="1.jpg" onmousemove="alert('fwoef')">
<br />
<input type="button" id="b1" inclick="setleftEdge()" value="set buttom left 100px" />
<br />
<br />

<input type="text" onkeydown="return noNumbers(event)" />
<div id="y" class="t" onmousedown="on()" onmouseup="off()">
</div>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<script>
alert("hwofew");
//document.getElementById(io).value="center";

/*如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value*/
document.getElementById("image").src="2.jpg";

var element=document.getElementById("header");
element.innerHTML="new header";
//改变html元素的样式
element.style.color="blue";
//修改HTML内容的方法使用innerHTML属性
//document.getElementById(id).innerHTML=new HTML
document.getElementById("p1").innerHTML="new tet!";
document.getElementById("p1").style.color="red";
/*document.write() 可用于直接向 HTML 输出流写内容
提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。*/

document.write(Date());
function setleftEdge(){
document.getElementById("b1").style.left="100px";
}
function noNumbers(e)
{
var keynum;
var keychar;

keynum = window.event ? e.keyCode : e.which;//event.keyCode/event.which 来获取用户的一些键盘操作
keychar = String.fromCharCode(keynum);
alert(keynum+':'+keychar);
}
function on(){
document.getElementById("y").style.background="yellow";
}
function off(){
document.getElementById("y").style.background="black";
}
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>
</body>
</html>