通过JS改变CSS样式的方法和对window对象的初步认识

最新推荐文章于 2021-08-11 17:17:09 发布

ほほえみ

最新推荐文章于 2021-08-11 17:17:09 发布

阅读量379

点赞数

文章标签： javascript css js

本文链接：https://blog.csdn.net/qq_45644916/article/details/108087965

版权

通过JS操作CSS

CSS的优先级
Style > ID选择器 > 类选择器 >标签选择器

1.通过style属性来修改css DOM Style对象
.style.CSS属性=“值”
注意：在JavaScript中CSS属性的写法和CSS中的属性写法不一样
CSS中多个单词使用 - 隔开
JavaScript中，使用驼峰命名法

font-size fontSize

margin-top marginTop

background-color
backgroundColor

2.通过class属性/ID选择器来重置选择器
标签对象.className=“类选择器1 类选择器2”
标签对象.id="ID选择器

JavaScript中的内置对象
DOM
Document对象
document 表示整个html网页文档

document.body.clintWidth body标签的宽度

document.body.clintHeight body标签的高度

BOM对象 Browser对象
window对象
整个浏览器窗口

属性：
window.innerWidth 浏览器的内部宽度
window.innerHeight 浏览器的内部高度[不包含标题栏，地址栏，状态栏等的高度]

方法：
window.alert(); 弹出提示框

window.close(); 关闭窗口

window.open()打开新窗口

            window.open("地址")在新窗口中打开

            window.open("地址",'_blank|_self|_top') 在指定的位置打开页面

                        _blank 新窗口

                        _self  当前窗口 

            window.open("地址",''，'width=100,height=100') 指定新窗口大小

let t = window.setTimeout(“函数”,1000) 延迟1000ms执行一次函数

let t = window.setInterval(“函数”,1000);
每间隔1000ms重复执行一次

window.clearTimeout(t) 结束指定的setTimeout

window.clearInterval(t) 结束指定的setInterval