window.onload 整个页面加载完之后执行
document.getElementById()选中id的相关元素进行设置
onclick 点击事件
document.getElementsByTagName()选取标签名
document.getElemnetsByClassName()选取类
document.body body元素可以直接取
cssText–>可以像css样式那样去写代码
aDiv[0].style.cssText='width:100px;height:200px'
innerHTML 修改html中的内容
<body>
<div class="a1">1</div>
<div class="a1">2</div>
<div class="a1">3</div>
<script>
var aDiv=document.getElementsByClassName('a1');
aDiv[0].innerHTML='3';//将a1第一个的内容变为3
setTimeout(function(){
aDiv[1].innerHTML='今天天气真好'//改变a1第二的内容,1秒钟之后变
},1000);
</script>
</body>
className 可以返回元素标签上的class的内容
console.log(aDiv[0].className);
className修改class的值，例如：将class改为a2
<head>
<meta charset="utf-8" />
<title></title>
<style>
.a2{
width: 200px;height: 200px;background: red;color: green;
}
</style>
</head>
<body>
<div class="a1">1</div>
<div class="a1">2</div>
<div class="a1">3</div>
<script>
var aDiv=document.getElementsByClassName('a1');
aDiv[0].className='a2';
</script>
</body>
onmouseover 鼠标移入
onmouseout 鼠标移出
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;padding: 0;
}
#a1{
width: 100px;height: 100px;background: black;color: aliceblue;
}
</style>
</head>
<body>
<div id="a1">1</div>
<script>
var aDiv=document.getElementById('a1');
aDiv.onmouseover=function(){
aDiv.style.background='blue';//鼠标移入变为蓝色
aDiv.innerHTML='鼠标移入';
}
aDiv.onmouseout=function(){
aDiv.style.background='black';//鼠标移出变为黑色
aDiv.innerHTML='鼠标移出';
}
</script>
</body>
补充知识：window.onresize 游览器大小发生改变时会进行触发
534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
