<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{heigh:300px;}
</style>
<script>
/*
DOM:document object model文档对象模型（层级）
节点类型：
元素节点 <div></div>
属性节点 id='div1'
文本节点 div文本
元素节点的获取：
document.getElementById(id)
功能：通过id获取符合条件的元素,(id必须是唯一的)
返回值：就是符合条件的一个节点
*/
window.onload=function(){
//window.onload写在这里的代码，是整个页面加载完成以后执行
var oDive=document.getElementById("div1");
alert(oDive);//[object HTMLDivElement]
/*
获取行间属性的值
*/
var oDive2=document.getElementById("div2");
alert(oDive2.id);//div2
alert(oDive2.title);//hello
//访问class 通过className来访问
alert(oDive2.className);//box
//改掉数据,设置行间数据的值
oDive2.id="div2";
oDive2.title='world';
oDive2.className='box4';
/*
[注]只能访问标签内行间的css样式
*/
alert(oDive2.style);//[object CSSStyleDeclaration]
alert(oDive2.style.width);//300px
alert(oDive2.style.height);//300px
//[注]如果css样式带一，将一去掉，从第二个单词开始首字母大写
alert(oDive2.style.backgroundColor);//red
oDive2.style.backgroundColor='blue';
var oDive2=document.getElementById("div3");
alert(oDive2.style.height);//空，没有值，只能访问标签内行间的css样式，box1的height不能访问
}
</script>
</head>
<body>
<div id="div1">div文本</div>
<div id='div2' title="hello" class="box" style="width:300px;height: 300px;background-color: red;">div2文本</div>
<div id='div3' class="box1" style="width:300px;">div3文本</div>
</body>
<script>
alert(1);
</script>
</html>
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
