Java Script
js 交互、功能,修改样式
编写js流程
布局:HTML+css
–属性:确定要修改哪些属性
–事件:确定用户要做哪些操作(产品设计)
–编写js:在事件中,用js来修改页面元素的样式
js 事件:用户的操作
onclick 当鼠标点击
onmouseover: 当鼠标移入
onmouseout 当鼠标移出
js特效-鼠标提示框
鼠标移入到input上的时候,让div1显示
鼠标移出input的时候,让div1隐藏
<input type="checkbox"
οnmοuseοver="div1.style.display='block'(显示);" 鼠标移入到input上的时候,让div1显示
οnmοuseοut="div1.style.display='none';(显示)">
若浏览器版本较低则需 兼容性问题document.getElementById('div1').style.display //通过id获取元素
鼠标移出input的时候,让div1隐藏
<div id="div1" >
为了您的信息安全。。。
</div>
<style>
#div1{
width: 200px;
height: 100px;
background: #ccc;
border: 1px solid #999;
display: none; 不显示
}
</style>
在js中=的作用是赋值 x=5就是把5赋值给x
函数
<style>
#div1{
width: 200px;
height: 100px;
background: #ccc;
border: 1px solid #999;
display: none;
}
</style>
<script>
function block(){
document.getElementById('div1').style.display='block';
}