HTML DOM（样式、事件）

最新推荐文章于 2022-10-30 14:07:22 发布

litengbin

最新推荐文章于 2022-10-30 14:07:22 发布

阅读量432

点赞数

分类专栏：前端-HTML、CSS、Javascript

前端-HTML、CSS、Javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

HTML DOM 样式

一个元素节点的style属性即对应的css

1.隐藏和显示
通过给元素的style.display 赋值，改变显示还是隐藏
```
<button οnclick="hide()">隐藏div</button>
  
<button οnclick="show()">显示div</button>
  
<br>
<br>
  
<div id="d">
  
这是一个div
  
</div>
  
<script>
function hide(){
 var d = document.getElementById("d");
 d.style.display="none";
}
  
function show(){
 var d = document.getElementById("d");
 d.style.display="block";
}
  
</script>
```
2.改变背景色
通过给元素的style.backgroundColor 赋值，修改样式
你也许注意到了style.backgroundColor 这里的backgroundColor和css中的背景色background-color 是有所不同的
换句话说，通过DOM的style去修改样式，需要重新记忆令一套样式名称，这是很累赘的事情。
最好能够通过CSS的属性名，直接就进行修改了。比如通过这样的方式：
```
d1.css("background-color","green");
```
这样就仅仅需要使用CSS原本的属性名即可了。
Javascript并不提供这样的解决方案，但是到了JQuery就提供了这样的解决方案
```
<div id="d1" style="background-color:pink">Hello HTML DOM</div>
 
<button οnclick="change()">改变div的背景色</button>
 
<script>
function change(){
  var d1 = document.getElementById("d1");
  d1.style.backgroundColor="green";
}
</script>
```

HTML DOM 事件

DOM的事件有很多，下表把工作中常用的事件列出来，并进行讲解

1.焦点事件
焦点相关的事件，分别有获取焦点和失去焦点
当组件获取焦点的时候，会触发onfocus事件
当组件失去焦点的时候，会触发onblur事件

<input type="text" οnfοcus="f()" οnblur="b()" id="input1" placeHolder="输入框1" >
<br>
<br>
<input type="text" id="input2" placeHolder="输入框2">
<br>
<br>
<div id="message"></div>
 
<script>
function f(){
 document.getElementById("message").innerHTML="输入框1获取了焦点";
}
 
function b(){
 document.getElementById("message").innerHTML="输入框1丢失了焦点";
}
 
</script>

2.鼠标事件
鼠标事件，由鼠标按下，鼠标弹起，鼠标经过，鼠标进入，鼠标退出几个事件组成
当在组件上鼠标按下的时候，会触发onmousedown事件
当在组件上鼠标弹起的时候，会触发onmouseup事件

当在组件上鼠标经过的时候，会触发onmousemove事件
当在组件上鼠标进入的时候，会触发onmouseover事件
当在组件上鼠标退出的时候，会触发onmouseout事件
注: 当鼠标进入一个组件的时候，onmousemove和onmouseover都会被触发，区别在于无论鼠标在组件上如何移动，onmouseover只会触发一次，onmousemove每次移动都回触发

<input type="button" οnmοusedοwn="down()" οnmοuseup="up()" value="用于演示按下和弹起" >
<br>
<br>
 
<input type="button" οnmοusemοve="move()"  value="用于演示鼠标经过" >
<br>
<br>
 
<input type="button" οnmοuseοver="over()" value="用于演示鼠标进入" >
<br>
<br>
 
<input type="button" οnmοuseοut="out()" value="用于演示鼠标退出" >
 
<br>
<br>
<div id="message"></div>
  
<script>
var number = 0;
 
function down(){
document.getElementById("message").innerHTML="按下了鼠标";
}
  
function up(){
document.getElementById("message").innerHTML="弹起了鼠标";
}
 
function move(){
document.getElementById("message").innerHTML="鼠标经过次数:"+(++number);
}
 
function over(){
document.getElementById("message").innerHTML="鼠标进入次数:"+(++number);
}
 
function out(){
document.getElementById("message").innerHTML="鼠标退出";
number = 0;
}
 
</script>

3.键盘事件
键盘事件，由键盘按下keydown，键盘按下keypress,键盘弹起几个事件组成
当在组件上键盘按下的时候，会触发onkeydown事件
当在组件上键盘按下的时候，也会触发onkeypress事件
当在组件上键盘弹起的时候，会触发onkeyup事件
注: onkeypress 是当按下并弹起的组合动作，这个说法是错误的
都是用于表示键盘按下，onkeydown和onkeypress的区别在什么呢？
onkeydown
可以获取所有键，除了打印键Prts
可以获取用户是否点击了修饰键 (ctrl,shift,alt)
不能判断输入的是大写还是小写
onkeypress
只能获取字符键
不能获取用户是否点击了修饰键 (ctrl,shift,alt)
可以判断输入的是大写还是小写

但是！在不同的浏览器上，以上规则是不成立的。说这些都没有卵用，你无法控制用户到底使用哪种浏览器。所以，只要记得keydown和keypress都表示点下了键。。。即可

“记得要先用鼠标选中该组件，然后敲击键盘”
<br>
<input type="button" οnkeydοwn="down(event)" value="用于演示按下keydown" >
<br>
<br>
 
<input type="button" οnkeypress="press(event)" value="用于演示按下keypress" >
<br>
<br>
 
<input type="button" οnkeyup="up()" value="用于演示弹起" >
<br>
<br>
 
<div id="message">
  
</div>
  
<script>
var number =0;
function down(e){
 
var text = "按下了键" + e.keyCode;
if(e.shiftKey==1)
   text += " 并且按下了shift键";
 
document.getElementById("message").innerHTML=text ;
}
 
function up(){
document.getElementById("message").innerHTML="弹起了键盘";
}
 
function press(e){
var text = "按下了键" + e.keyCode;
if(e.shiftKey==1)
   text += " 并且按下了shift键";
 
document.getElementById("message").innerHTML=text ;
}
 
</script>

4.点击事件
点击事件，由单击，双击按两个事件组成
当在组件上单击的时候，会触发onclick事件
当在组件上双击的时候，会触发ondblclick事件
注1：在组件上，按下空格或则回车键也可以造成单击的效果，但是却不能造成双击的效果
注2: 自定义函数不要使用click()，这是保留函数名。

<input type="button" οnclick="singleClick()" οndblclick="doubleClick()"  value="用于演示单击和双击" >
 
<br>
<br>
<div id="message"></div>
  
<script>
function singleClick(){
document.getElementById("message").innerHTML="单击按钮";
}
  
function doubleClick(){
 
document.getElementById("message").innerHTML="双击按钮";
}
</script>

5.变化事件
当组件的值发生变化的时候，会触发onchange事件
注：对于输入框而言，只有在失去焦点的时候，才会触发onchange，所以需要点击一下"按钮" 造成输入框失去焦点

<input type="text" id="t1" οnchange="change()"  value="" >
  
<br>
<br>
<input type="button" value="令输入框失去焦点的按钮" >
<br>
<br>
<div id="message"></div>
   
<script>
function change(){
var message = document.getElementById("message");
var t1 = document.getElementById("t1");
message.innerHTML = "输入框的值变为了: "+ t1.value;
}
   
</script>

6.提交事件
可以在form元素上，监听提交事件
当form元素@提交的时候，会触发onsubmit事件
本例使用提交账号密码来进行演示

<form action="/study/login.jsp" οnsubmit="login()">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
 
<script>
  function login(){
      alert("提交表单");
  }
</script>

7.加载事件
当整个文档加载成功，或者一个图片加载成功，会触发加载事件
当body元素或者img@加载的时候，会触发onload事件

<script>
  function loadBody(){
document.getElementById("message1").innerHTML="文档加载成功";
  }
  function loadImg(){
document.getElementById("message2").innerHTML="图片加载成功";
  }
 
</script>
 
<body οnlοad="loadBody()">
  <div id="message1"></div>
  <div id="message2"></div>
</body>
 
<img οnlοad="loadImg()" src="example.gif"/>

8.当前组件
this表示触发事件的组件，可以在调用函数的时候，作为参数传进去

<input type="button" οnclick="singleClick(this)" value="演示this的按钮1" >
<input type="button" οnclick="singleClick(this)" value="演示this的按钮2" >
 
<br>
<br>
<div id="message"></div>
  
<script>
function singleClick(button){
var s = "被点击的按钮上的文本是: "+button.value;
document.getElementById("message").innerHTML=s;
}
 
</script>

9.阻止事件的发生
比如在提交一个表单的时候，如果用户名为空，弹出提示，并阻止原本的提交
1. 在调用函数的时候，增加一个return
2. 在函数中，如果发现用户名为空，则返回false
3. 当onSubmit得到的返回值是false的时候，表单的提交功能就被取消了

<form method="post" action="/study/login.jsp" οnsubmit="return login()">
账号：<input id="name" type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
  
<script>
  function login(){
   var name = document.getElementById("name");
   if(name.value.length==0){
     alert("用户名不能为空");
     return false;
   }
   return true;
    
  }
</script>