Javascript操作CSS | 天一阁

Javascript操作CSS

TL;DR : js的一个重要功能,就是实现网页的各种交互效果。主要是通过添加事件处理函数,然后修改DOM元素的style,或者添加预制的css class来实现各种前端展现。

在web前端进行界面逻辑处理,只能依靠js。在js尚不普及的年代,都是单纯依赖页面跳转,表单提交实现获取前端展现。有了js之后,前端的界面处理,就可以在本地执行,而且也越来越类似于桌面应用。

js操作web界面的基本套路就是:

  1. document.querySelector选择到需要处理的DOM元素
  2. 为此element添加事件响应,比如click, mousemove, mouseover
  3. 在事件处理函数中,操作元素的style属性,还可以通过className或classList对css类进行操作

比如显示一个模式对话框,这个对我来说简直就是宇宙大谜团。现在我终于明白了。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class='backdrop'></div>
<div class='modal'>
<h1 class='modal-title'>是否确认删除此条记录</h1>
<div class='modal-action'>
<a href='somepage.html' class='modal_button'>Yes</a>
<button class='modal_button modal_negative_button'>No</button>
</div>
</div>
<div class='main-content'>
<button class='record-delete'>
删除
</button>
</div>

其中.backdrop .modal 起初都是隐藏的,然后通过相应click事件,才会弹出来。backdrop是个遮罩,有半透明的背景色,使得原有页面上的内容看得到,但是无法相应鼠标事件,如果也不想要tab键获得焦点,可以加上tabindex="-1"

添加响应事件的处理逻辑,就是调用addEventListener

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function showModal(){
document.querySelector('.backdrop').classList.add('open');
document.querySelector('.modal').classList.add('open');
}
function closeModal(){
document.querySelector('.backdrop').classList.remove('open');
document.querySelector('.modal').classList.remove('open');
}
//点击按钮,弹出对话框
var btnList = document.querySelectorAll('.action-button');
for (var i=0;i<btnList.length;i++){
btnList[i].addEventListener('click', function(){
showModal();
});
}
//点击cancel
var closeButton = document.querySelector('.modal .modal_negative_button');
closeButton.addEventListener('click', function(){
closeModal();
});