DOM操作_操作样式

DOM操作_操作样式

1. style 属性(行内样式)

读取:
dom.style.样式名称DOM操作_操作样式
设置:
dom.style.样式名称=样式值
说明:所有的样式名称都与Css相通,但命名规则为驼峰命名法。
dom. style. fontSize = ‘30px’
dom.style.display = ‘none’

案例代码如下

let p = document.querySelector('#title') as HTMLParagraphElement
p.style.fontSize = '50px'
p.style.color = 'red'
//隐藏p标签
p.style.display = 'none'
//显示p标签
p.style.display = 'block'

2. classList 属性(类样式)

包含三个常用方法:添加、移除、判断是否存在。

let p = document.querySelector('#title') as HTMLParagraphElement
//添加类名，可同时添加多个值
p.classList.add('b','c')
//删除类名，可同时移除多个值
p.classList.remove('a')
//判断类名是否存在，返回值为true或者false，最好单值操作
let has = p.classList.contains('a')

console.log(has)