JavaScript学习之旅——JS操作CSS

CSS 优先规则：

优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

1、通过JSDOM对象的style属性修改CSS样式

在JavaScript中是通过DOM对象的style属性来修改CSS样式中的值。例如：

//通过DOM对象获取到对应的标签
let card = document.querySelector(".card");

//给标签添加监听事件，通过其中的回调函数修改CSS的值
card.addEventListener('mouseover',function(){
    card.style.background="#0000ff";
    card.style.fontSize="30px";
});
card.addEventListener('mouseout',function(){
    card.style.background="#ff0000";
    card.style.fontSize="16px";
});

2、通过JS重置选择器修改CSS样式

let  card = document.querySelector(".card");
//回调函数中使用className这个属性重置标签的选择器
card.addEventListener('mouseover',function(){
    card.className="card card2";
});
card.addEventListener('mouseout',function(){
    card.className="card";
});

3、JS内置对象

3.1、DOM（Docment Object Model）

DOM中文翻译是文档对象模型，表示的是整个html文件，是将整个html文档看成一个模型。

//这句代码就是通过DOM对象获取对应选择器的标签
let btn = document.querySelector("#close");

3.2、BOM（Browser Object Model）

BOM的中文翻译是浏览器对象模型，它是将整个浏览器窗口看成一个模型

window.innerWidth       //浏览器的内部宽度
window.innerHeight      //浏览器的内部高度[不包含标题栏，地址栏，状态栏等的高度]
window.alert();         //弹出提示框
window.close();         //关闭网页
......