五条Programmer 2020-03-07 16:37 采纳率: 100%
浏览 835
已采纳

html中如何用js来写一个判断，就像是java中的if一样。

如何用**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>

初始效果

图片说明

想要在网页缩小的时候隐藏图片

图片说明

  • 写回答

1条回答 默认 最新

  • 李国庆❀ 2020-03-07 21:02
    关注

    我给你提供两种方法，第一种只是用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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler