第一天总结的是一些HTML DOM 事件中的鼠标事件
<!--more-->
js事件中主要的都是对样式的显示隐藏,display:none
or display:block
其中最简单的就是使用onclick
事件对属性进行显示隐藏或者改变class
属性
demo1
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
语法
alert(message)
要在 window 上弹出的对话框中显示的纯文本(而非 HTML 文本)
<input type="button" value="按钮" onclick="alert('我是一个消息框')">
demo2
鼠标移入移出显示隐藏div块
<input type="checkbox"
onmousemove="document.getElementById('div1').style.display='block';"
onmouseout="document.getElementById('div1').style.display='none';">
<div id="div1" class="dsn">显示隐藏div块</div>
更多的鼠标事件
属性 | 描述 | DOM |
---|---|---|
onclick | 当用户点击某个对象时调用的事件句柄。 | 2 |
oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 | |
ondblclick | 当用户双击某个对象时调用的事件句柄。 | 2 |
onmousedown | 鼠标按钮被按下。 | 2 |
onmouseenter | 当鼠标指针移动到元素上时触发。 | 2 |
onmouseleave | 当鼠标指针移出元素时触发 | 2 |
onmousemove | 鼠标被移动。 | 2 |
onmouseover | 鼠标移到某元素之上。 | 2 |
onmouseout | 鼠标从某元素移开。 | 2 |
onmouseup | 鼠标按键被松开。 | 2 |
参照菜鸟教程
demo3
使用函数简单的对元素进行显示隐藏
<script>
function showHide()
{
var oDiv=document.getElementById('div2');
if(oDiv.style.display=='block')
{
oDiv.style.display='none';
}
else
{
oDiv.style.display='block';
}
}
</script>
<input type="button" value="显示隐藏" onclick="showHide()" />
<div id="div2"></div>
demo4
使用函数改变元素css属性值
<script>
function toGreen()
{
var oDiv=document.getElementById('div3');
oDiv.style.width='300px';
oDiv.style.height='300px';
oDiv.style.background='green';
}
function toRed()
{
var oDiv=document.getElementById('div3');
oDiv.style.width='200px';
oDiv.style.height='200px';
oDiv.style.background='red';
}
</script>
<div id="div3" onmouseover="toGreen()" onmouseout="toRed()"></div>
demo5
简单的对网页的换肤功能
要在最前面的body
中加入id="changebg"
<script>
function changebgred(){
var oL=document.getElementById('changebg');
oL.style.background='red'
}
function changebggreen(){
var oL=document.getElementById('changebg');
oL.style.background='green'
}
</script>
<a onclick="changebgred()" class="bon">红色</a>
<a onclick="changebggreen()" class="bon">绿色</a>
demo6
className的使用
<style>
#div5 {
width: 100px;
height: 100px;
border: 1px solid #000
}
.box {
background: red;
}
.box2 {
background: #fff;
}
</style>
<script>
function toRe(){
var oY=document.getElementById('div5')
oY.className='box';
}
function toBa(){
var oY=document.getElementById('div5')
oY.className='box2';
}
</script>
<input type="button" value="变红" onclick="toRe()" />
<input type="button" value="变白" onclick="toBa()" />
<div id="div5">
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。