如何用**js写一个判断语句**,当网页缩小到一定程度的时候让**a标签隐藏**。我自己的想法是**判断浏览器的宽度**,然后把**opacity变为0.0**,但是我现在不会自己写js,我还没学过js,而且这个东西比较急,所以拜托各位**大佬**了~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style>
.im{
width:300px;
height:376px;
}
#a{
position: fixed;
left: 0;
top: 28%;
}
</style>
<body>
<a id="a" ><img src="../test.jpg" /></a>
</body>
<script>
</script>
</html>
初始效果
想要在网页缩小的时候隐藏图片
我给你提供两种方法,第一种只是用CSS3中的媒体查询,第二种用javascript,由于你不怎么会js,我都有注释,希望帮到你
第一种(CSS3媒体查询):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
display: block;
width: 300px;
height: 300px;
background: red;
}
@media all and (max-width: 600px) {
a {
display: none;
}
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
第二种(JavaScript方法):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
display: block;
width: 300px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<a href="#"></a>
<script>
window.onload = function() { // 页面加载完后执行以下函数
let a = document.querySelector("a");
window.onresize = function() { // 这个函数在浏览器的窗口大小改变时触发
if(window.outerWidth < 600) { // 判断浏览器的窗口宽度是否小于600
a.style.display = "none";
}
}
}
</script>
</body>
</html>