<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置对象-document</title>
<script>
// document作用:
// 1. 可以动态的获取网页中所有的标签
// 2. 可以对获取到的标签进行CRUD
// 往网页中插入内容
document.write('Hello World');
document.write('<input type="file">');
document.write('<img src="image/img_01.jpg">')
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切换图片</title>
<script>
function changeImg() {
// alert(0);
// 拿到图片
var img = document.getElementsByClassName('icon')[0];
// console.log(img);
// 改变对应的属性
img.src = 'image/img_02.jpg';
}
</script>
</head>
<body>
<img class="icon" src="image/img_01.jpg">
<p></p>
<button onclick="changeImg();">换一张图片</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="icon" src="image/img_01.jpg">
<p></p>
<button>来回切换</button>
<script>
// 拿到对应的标签
var img = document.getElementById('icon');
var btn = document.getElementsByTagName('button')[0];
// 监听按钮的点击
btn.onclick = function () {
// console.log(img.src);
// indexOf lastIndexOf 如果包含,则返回任意正数, 不包含,则返回-1
if (img.src.lastIndexOf('image/img_01.jpg') != -1){
img.src = 'image/img_02.jpg';
}else{
img.src = 'image/img_01.jpg';
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用事件</title>
</head>
<body>
<img name="icon" src="image/img_03.jpg">
<input>
<script>
// 进入页面调用
window.onload = function () {
// alert('我进来了');
// 拿到对应的图片
var img = document.getElementsByName('icon')[0];
// 当鼠标进入图片
img.onmouseover = function () {
// alert('鼠标进入图片');
console.log('鼠标进入图片');
};
// 当鼠标在图片上移动
img.onmousemove = function () {
// alert('鼠标在图片上移动');
console.log('鼠标在图片上移动');
};
// 当鼠标离开图片
img.onmouseout = function () {
// alert('鼠标离开图片');
console.log('鼠标离开图片');
};
// 拿到输入框
var input = document.getElementsByTagName('input')[0];
input.onclick = function () {
// css属性 style.css属性
input.style.outline = 'none';
input.style.width = '500px';
input.style.border = '1px solid yellow';
}
}
</script>
</body>
</html>
网友评论