效果实现:
1、点击按钮文字变成红色
2、点击图片,图片1换成图片2
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Demo</title>
</head>
<body>
<!-- if-else语法、改变元素样式 -->
<h1 id="xx">这是一张帅气的图片</h1>
<script>
function changeImage(params) {
element=document.getElementById('myimage')
if (element.src.match("u=4137868653"))
{
element.src="https://img0.baidu.com/it/u=1797949545,3758514959&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1662656400&t=847cba486feaf79949c6009fc212860f"
}
else
{
element.src="https://img2.baidu.com/it/u=4137868653,210701858&fm=253&app=138&size=w931&n=0&f=JPG&fmt=auto?sec=1662656400&t=134f700c21ddf624ee6551bd723f7a27"
}
}
function modify_color(params) {
x=document.getElementsByTagName('h1');
x.style.color='#ff0000';
// x=document.getElementById("xx") // 找到元素
// x.style.color="#ff0000"; // 改变样式
}
</script>
<img id="myimage" onclick="changeImage()" src="https://img2.baidu.com/it/u=4137868653,210701858&fm=253&app=138&size=w931&n=0&f=JPG&fmt=auto?sec=1662656400&t=134f700c21ddf624ee6551bd723f7a27" width="180" height="200">
<button type="button" onclick="modify_color()">点击有惊喜</button>
</body>
</html>
图片可以正常切换,但是文字颜色切换的时候遇到了如下报错 “Uncaught TypeError: Cannot set property 'className' of undefined”。
翻译:未捕获类型错误:无法设置未定义的属性“className”
原因是下面这行代码,当getElementByTagName获取元素时,获取的是一个数组,当我们没有注明下标,去获取时就会出现元素未定义的报错。
我们加上下标 [i] 即可,在本demo中应该如下修改:
x=document.getElementsByTagName('h1')[0];