day023html css js

html样式控制css 事件控制js

live server 自动监视html变化实时刷新web浏览器页面

使用插件需要运行html时选择 open with live server

右下角 port5500 单击可以关闭live server插件

引入 css js

<script src="./a.js"></script>

<link rel="stylesheet" href="./a.css">

浏览器中无法直接运行ts 必须先tsc 命令将ts转换为js文件，js文件引入html页面生效

tsc --watch a.ts 开启ts的监视模式 省去每次编辑ts后都要tsc转换一次js文件

每个html中的标签都会被浏览器创建dom对象

js控制操作dom对象达到web开发 document.对象操作

 
let anum = 8;
console.log(anum)
document.title = 'i wait you'
//1.获取dom元素 （获取标签）
//2.设置样式
//3.设置内容
//4.绑定(解绑)事件
// document.querySelector(selector)//选择器只能选择到第一个匹配的标签selector参数可以是.class id 标签任意一种选择器
let span1 = document.querySelector("#span1") as HTMLSpanElement
console.dir(span1)//打印dom元素对象
let img1 = document.querySelector("#img1") as HTMLImageElement
console.dir(img1) 
​
img1.src//document 不能获取img的src特有的属性，只能获取公有的属性  必须指定断言才能获取src
let btn2 = document.querySelector('p') as HTMLParagraphElement;
//querySelectot 选择标签的第一个 querySelectorAll 选择所有符合条件的标签
let btn3 = document.querySelectorAll("p")[0] as HTMLParagraphElement
btn3.classList.add("BUT3")
btn2.classList.add("but2")
console.dir(btn2)
let fl = btn3.classList.contains("BUT3");
if(fl){
    btn3.classList.add("but55")
    btn3.classList.remove("BUT3")//移除类名
}
btn2.addEventListener("click",function(e){
   let tar = e.target as HTMLParagraphElement
   tar.style.fontSize = "10px"
})
//类型断言和元素添加事件
let btn = document.getElementsByTagName("button")[0];
btn.addEventListener("click",function(event){
    let target = event.target as HTMLButtonElement;
    //拿到点击事件的元素并做断言，不做断言获取的元素类型无法点出style
    target.style.fontSize = "30px";
​
})
​