缩放页面时，让改变某些元素属性

最新推荐文章于 2021-05-30 23:56:45 发布

一剑落笙歌

最新推荐文章于 2021-05-30 23:56:45 发布

阅读量527

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/Gqiangqiang/article/details/104317458

版权

有时我们或许会用到页面缩放到一定程度时让某个元素隐藏的效果，这里就让我们隐藏一下搜索框旁边的按钮。

onresize事件窗口调整大小时触发
如果要实现这个效果，自然要监听页面的宽或者高。
onresize事件会在窗口或框架被调整大小时发生。

我们可以在body上设置onresize事件,这样，当屏幕进行缩放时就会执行hideBtn()这个方法

<body onresize="hideBtn()">
  <!-- ... -->
</body>

而hideBtn()函数内改变需要改变的标签属性就好
HTML：

<input class="search_input" autocomplete="off" name="query" id="sinput" type="text" placeholder="输入搜索词...">
<button class="sb_t" id="sb_t"></button>

CSS：

.search_input {
    border-radius: 7px 0 0 7px; /* 边角的圆角大小 设置顺序是左上、右上、右下、左下 */
    padding-left: 15px; /* 让输入框内的文字离左边框远一点 */
    border: 1px solid white;
    outline: none; /* 去除聚焦选中时的边框 */
    font-size: 18px;
    height: 40px;
    width: 350px;
}
.sb_t {
    width: 50px;
    height: 44px;
    font-size: 20px;
    border: none; /* 隐藏搜索按钮边框 */
    border-radius: 0 7px 7px 0;
    background-image: url(../img/search.png);
    background-position: center; /* 背景图片定位 */
    background-repeat: no-repeat;
    transition: .2s ease; /* :hover效果过渡 */
}

JavaScript：

function hideBtn() {
  /*
     使用$(document).width()来获取文档的宽，或者使用$(document).height()获取文档的高（这里是jQuery方式）
     然后判断宽度是否小于，样式变化的最小宽度
  */
    if($(document).width() < 500){/* 比最小宽度小时改变按钮和输入框的样式 */
        $("#sb_t").css("display", "none"); /* 改变按钮的样式 （隐藏） */
        $(".search_input").css("border-radius", "7px");/* 改变输入框的样式 */
    } else {/* 如果比最小宽度大时把样式改回来 */
        $("#sb_t").css("display", "block");
        $(".search_input").css("border-radius", "7px 0 0 7px");
    }
}
hideBtn() /* 让函数在页面加载时就执行一次，不然在放大后刷新页面可能会出现样式问题 */