Question

所以我有一个脚本将div元素的宽度设置为其高度的百分比，但我只希望当视口的宽度大于800px时运行此脚本。这是我的代码，当视口宽度超过800px时工作正常，但继续以低于800px宽的分辨率运行：

function main_set_width() {
    if ($(window).width() > 799) {
        var height = $('.main-set-width').height();
        $('.main-set-width').css('width',height * 1.2974);
    } else {
        return;
    };
};

有人知道我可以在else {}语句中放什么来阻止脚本运行if {}语句中的东西吗？

Answer 1

可能是您的if声明错误。

请尝试使用if( innerWidth > 799)。

Answer 2

您显然是使用jQuery INSIDE设置css宽度。所以，在这种情况下你不必返回任何东西。你根本不需要else语句。如果“if”中的条件未满足，则该函数根本不会执行，这就是你想要的。

Answer 3

如果你的要求是在certian屏幕尺寸之后将元素的高度更改为流畅的东西 - 在这种情况下id建议使用媒体查询

HTML

<div class="page">

    <div class="fluid-element-wrapper">
        <div class="fluid-element">
            content
        </div>
    </div>
</div>

CSS

.fluid-element-wrapper {
    width:30%;
    height:auto;
    padding-bottom:0;
    background:green;
}

@media ( max-width:799px ) {
    .fluid-element-wrapper {
        position:relative;
        overflow:hidden;
        padding-bottom:30%; /* or whatever the fluid height you'd want it to be */
    }

    .fluid-element {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
}

小提琴：http://jsfiddle.net/Varinder/Rqs3C/

Answer 4

不久前我遇到过类似的问题。您可以尝试以下内容：

function main_set_width() {
    if ($(window).width() > 799) {
        var height = $('.main-set-width').height();
        $('.main-set-width').css('width',height * 1.2974);
    } else {
        $('.main-set-width').css().remove();
    };
};

在其他{}语句中什么都不做

4 个答案: