likes
comments
collection
share

TypeScript Dom操作（下）

作者站长头像
站长
· 阅读数 55

操作样式

方式一

dom.style属性：行内样式操作，可以设置每一个样式属性（比如，字体大小、文字颜色等)

说明：所有的样式名称都与 css 相通，但命名规则为驼峰命名法

dom.style.fontSize = '30px'
dom.style.display = 'none'

我们来在代码中练习一下

<p id="txt">狼牙月 伊人憔悴</p>

let p = document.querySelector('#txt') as HTMLParagraphElement
//读取
console.log("字体大小：" + p.style.fontSize)
//设置
p.style.fontSize = '30px'
p.style.color = 'red'
console.log("字体大小：" + p.style.fontSize)

TypeScript Dom操作（下） TypeScript Dom操作（下）

开始没有打印出字体大小，因为我们还没设置，设置后再打印就有值了

方式二

dom.classList属性：类样式操作，也就是操作类名，比如，添加类名、移除类名等。它包含三个常用方法：添加、移除、判断是否存在

【添加】 dom.classList.add(类名1，类名2，...)

参数表示：要添加的类名，可以同时添加多个

比如： <p class="a"></p> dom.classList.add ( 'b ', 'c') 就是添加 class 样式为 class="a b c"

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <link rel="stylesheet" href="public/css/bootstrap.css">
    <style>
        .a {
            font-size: 30px;
        }

        .b {
            color: green;
        }

        .c {
            background-color: skyblue;
        }
    </style>
</head>
<body>
<p id="txt" class="a">狼牙月 伊人憔悴</p>
<script src="hello.js"></script>
</body>
</html>

let p = document.querySelector('#txt') as HTMLParagraphElement
p.classList.add('b','c')

TypeScript Dom操作（下）

【移除】 dom.classListremove(类名1，类名2， ...)

参数表示：要移除的类名，可以同时移除多个。

比如： <p class="a b c"></p> dom.classList,remove ( 'a', 'c') 那么移除 class 样式后就变成了 class="b"

还是上边的 html，我们把 class a 移除

let p = document.querySelector('#txt') as HTMLParagraphElement
p.classList.remove('a')

TypeScript Dom操作（下）

【判断类名是否存在】 let has = dom.classList.contains(类名)

参数表示：要判断存在的类名

比如： <p class="b"></p> dom.classList.contains( 'a' )//false dom.classList.contains ('b')//true

还是刚才的 html

let p = document.querySelector('#txt') as HTMLParagraphElement
console.log(p.classList.contains('a'))//true

操作事件

在浏览网页时，我们经常会通过移入鼠标、点击鼠标、敲击键盘等操作，来使用网站提供的功能。如果要让我们自己实现这样的功能，就需要通过操作事件来实现 实际上，移入鼠标、点击鼠标、敲击键盘等，都是常见的DOM事件

操作事件的两个方法： addEventListener添加(绑定)事件 removeEventListener移除(解绑）事件

addEventListener添加事件

dom. addEventListener (事件名称，事件处理程序)

作用：给DOM元素添加事件

事件名称：字符串，比如: click(鼠标点击事件)、 mouseenter(鼠标进入事件)

事件处理程序：回调函数、指定要实现的功能，该函数会在触发事件时调用

示例：鼠标点击按钮，打印内容

btn.addEventListener('click', function() {
	console.log ('鼠标点击事件触发了')
})

实践一下，我们给 button 绑定点击事件

<button id="btn">点我打印</button>

let btn = document.querySelector('#btn')
btn.addEventListener('click',function () {
    console.log("点击事件触发了")
})

TypeScript Dom操作（下）

也可以绑定鼠标移入事件

btn.addEventListener('mouseenter',function () {
    console.log("鼠标移入事件触发了")
})

TypeScript Dom操作（下）

事件对象(event)，是事件处理程序(回调函数)的参数，表示与当前事件相关的信息，比如：事件类型(type)、触发事件的DOM元素(target)等

比如：

btn.addEventListener ( 'click ', function (event){
	console.log (event.type)//click
	console.log(event.target)//btn元素
})

来做个练习，点击按钮让文字变大

TypeScript Dom操作（下）

<button id="btn">点我变大</button>

let btn = document.querySelector('#btn')
btn.addEventListener('click', function (event) {
    console.log(event.type)//click
    console.log(event.target)//btn元素
    let target = event.target as HTMLButtonElement
    target.style.fontSize = '30px'
})

同时，控制台输出了 TypeScript Dom操作（下）

removeEventListener移除(解绑）事件

dom.removeEventListener(事件名称，事件处理程序) 作用：移除给DOM元素添加的事件，移除后，事件就不再触发了 事件名称：同添加事件的第一个参数 事件处理程序：必须要跟添加事件时的事件处理程序是同一个，否则无法移除!

正确方式：

function handleclick () { }
btn.addEventListener('click ', handleclick)
btn.removeEventListener('click', handleclick)

说明：添加和移除事件时，事件处理程序是同一个，都是函数 handleclick

错误演示:

btn.addEventListener ( 'click ' , function () { })
btn.removeEventListener ( 'click ', function () { })

注意：以上两个函数虽然长的一样，却是不同的函数(双胞胎，不是同一个人)

<button id="btn">点我</button>
<button id="remove">移除上面按钮click事件</button>

let btn = document.querySelector('#btn')
let removeBtn = document.querySelector('#remove')

function handleClick() {
    console.log("click事件触发了")
}

btn.addEventListener('click', handleClick)
removeBtn.addEventListener('click', function () {
    btn.removeEventListener('click', handleClick)
})

TypeScript Dom操作（下）

如果事件只需要触发—次，可以在添加事件时处理，即传入第三个参数，将once属性设置为true。once如果值为 true，会在触发事件后，自动将事件移除，达到只触发一次的目的

btn.addEventListener ( 'click', function () {}, { once: true })

let btn = document.querySelector('#btn')

btn.addEventListener('click', function () {
    console.log("click事件触发了")
}, {once: true})

TypeScript Dom操作（下）

函数声明形式的事件处理程序说明

可以先使用函数，再声明函数 原因：函数声明在当前 ts 文件中的任意位置都有定义，所以可以先调用，再声明

btn.addEventListener ( 'click ', handleclick)
function handleclick() { }
转载自:https://juejin.cn/post/7127450963907969032
评论
请登录