Question

我有像这样的JavaScript

$(document).on('click', '.transparent-btns_nav', function(event) {
    var images = $('.rslides ').find('img');
    setTimeout(function() {
        images.each(function() { // jQuery each loops over a jQuery obj
            var h = $(this).outerHeight(true); // $(this) is the current image
            var w = $(this).outerWidth(true);
            // alert('source:'+$(this).attr('src'));
            // alert('alto: '+h);
            if (h < 290) {
                $(this).addClass('small');
                var m = 290 - h;
                m = m / 2;

                // alert('less height');
                $('.small').attr('style', 'margin-top:' + m);
                // $('.small').css('margin-top', +m + "px");
                // $('.small').css('margin-bottom', +m + "px");
            }
            if (h > 290) {
                $(this).addClass('big');
                var m = h - 290;
                m = m / 2;
                // alert('less height');
                $('.small').attr('style', 'margin-top:' - m);
            }
        });
    }, 1000);
});

媒体查询就像这样

@media only screen
and (min-device-width: 420px)
and (orientation: landscape) {
    #bg {
    }
    #bg img {
        margin - top: 0px;
    }
    .class {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .big {
        margin-top: 0px;
        margin-bottom: 0px;
    }
}

我想要做的是使用JavaScript向类big和small添加属性，并在模式为横向时使用MediaQuery删除属性。但我无法做到这一点，请帮助我在这个

更多解释

我正在尝试为图像添加填充，这些填充比div大或小。就像它的高度较小，然后在顶部和底部相等的填充。如果图像的高度太大，那么我试图在顶部添加-ve填充并使图像居中。所有这些都是在纵向模式下动态完成的。如果手机变成横向，则应删除所有填充

Answer 1

我可以为您的代码提供小输入。相反＆＃34; ATTR ＆＃34;，您可以直接使用＆＃34; CSS ＆＃34;将内联样式应用于任何元素的方法。

它的行为与属性样式相同。

而不是：

$('.small').attr('style', 'margin-top:' + m);

您可以使用此功能：

$('.small').css('margin-top',m);

Out put将与您想要的相同：

<强>类=＆＃34;小＆＃34;风格=＆＃34;边距：XX＆＃34;

Answer 2

我相信你真正追求的不是＆＃34;属性＆＃34;但改变规则＆＃34;，和这个人一样： Changing a CSS rule-set from Javascript

那就是说，我不确定你只是简单地使用类选择器找到所有适用的元素并直接改变它们的样式就不会更好。但它可以做到。

Answer 3

我的第一个建议是寻找垂直对齐的另一种选择。查看display: inline-block或display: table-cell，看看您是否可以使用vertical-alignment: middle;。 - http://css-tricks.com/centering-in-the-unknown/

第二个建议是在媒体查询中使用!important语句。这样你可以使用内联样式（jQuery.css（））来定义纵向填充，并覆盖横向：

@media only screen
and (min-device-width: 420px)
and (orientation: landscape) {
    .big {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }
}

第三个建议是使用javascript在页面上写一些新的CSS：

document.write("<style> .small { margin-top:10px; margin-bottom:10px; } @media only screen and (min-device-width: 420px) and (orientation: landscape) { .small { margin-top:0; margin-bottom:0; } }</style>");

是否可以使用JQuery .attr（）标记向类添加属性？

3 个答案: