天一阁
0%

Javascript操作CSS

Posted on In Views: Valine:

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();
});