是否可以使用 JQuery .attr() 标签向类添加属性？

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 添加属性，并在模式为 Landscape 时使用 MediaQuery 删除属性。但是我做不到，请有人帮我解决这个问题

更多解释

我正在尝试为大于或小于 div 的图像添加填充。就像它的高度小于顶部和底部的相等填充一样。如果图像的高度太大，那么我试图在顶部添加 -ve 填充并使图像居中。所有这些都是在纵向模式下动态完成的。如果手机变成横向，所有的内边距都应该去掉

Answer 1

我可以对您的代码进行少量输入。 取而代之的是“ATTR”，您可以直接使用“CSS”方法将内联样式应用于任何元素。

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

改为：

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

你可以使用这个：

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

输出将与您期望的相同：

class="small" style="margin-top:xx"

Answer 2

我的第一个建议是让您寻找另一种垂直对齐方式。查看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>");

Answer 3

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

也就是说，我不确定您是否最好只使用类选择器来查找所有适用的元素并直接更改它们的样式。但可以做到。