BOM
系统对话框
alert()
:弹出对话框;
confirm()
:弹出一个带确定和取消的提示框;
- 返回值:如果点击确定,返回 true;如果点击取消,返回 false;
prompt()
:弹出一个带输入框的提示框;
- 第一个参数:面板上显示的内容;
- 第二个参数:输入框里面的默认内容;(可以不写)
- 返回值:如果点击确定,返回输入框中的内容;如果点击取消,返回 null;
history 对象
作用:当前窗口历史记录,只要加载的 url 不一样就会产生历史记录;
注意不是浏览器的,而是当前窗口的历史记录。
history.length
:输出当前窗口历史记录的条数;history.back()
:返回上一条历史记录;history.forward()
:前进到下一条历史记录;history.go()
:参数:0,刷新当前页面;正整数,前进 n 条记录;负整数,后退 n 条记录;
location 对象的属性
url:统一资源定位符;
协议: // IP(域名) : 端口号 / 路径 / ? 查询字符串 # 锚点
protocol: // hostname: port / pathname / ?search # hash
DOM
节点类型
- 元素节点:
<div></div>
- 属性节点:
id = "box"
- 文本节点:div 文本
获取有效样式
通过 .style.xxx
的方式只能访问内联的 css 样式;
而获取当前有效样式系统提供了两种方法:
- IE j兼容:
alert(oDiv.currentStyle['height']);
- 火狐,谷歌等兼容:
alert(getComputedStyle(oDiv)['height']);
定义一个跨浏览器也能兼容的方法:
function getStyle(node,cssStyle) {
return node.currentStyle ? node.currentStyle[cssStyle] : getComputedStyle(node)[cssStyle];
}
实例:改变文本显示
每隔一秒,文字颜色随机改变,且文字变大变小,六次一循环:
html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变化的文字</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="text">
某些文字
</div>
<script src="./src/sw.js"></script>
</body>
</html>
css 文件
#text {
width: 300px;
height: 200px;
margin: 100px auto;
border: black solid 1px;
text-align: center;
font-size: 18px;
line-height: 200px;
}
js 文件
// 随机颜色
function randomColor() {
let str = `rgb(${parseInt(Math.random()*256)},
${parseInt(Math.random()*256)},
${parseInt(Math.random()*256)})`;
return str;
}
window.onload = function() {
let otext = document.querySelector('#text');
let changeSize = 5;
let count = 0;
setInterval(function(){
otext.style.color = randomColor();
let textSize = parseInt(getComputedStyle(otext)['fontSize']);
otext.style.fontSize = textSize + changeSize + 'px';
count ++;
if(count % 6 == 0){
changeSize *= -1;
}
},1000);
}
效果如下: