Is it possible to add attribute to a class using JQuery .attr() tag?

Question

I have a JavaScript like this

$(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);
});

And Media Query something like this

@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;
    }
}

What I want to do is add attributes to class big and small using the JavaScript and remove the attribute using the MediaQuery when the mode is Landscape . But I am not able to do it can some one please help me out in this

More Explanation

I am trying to add padding to the image which are bigger or smaller than the div . Like if its height is smaller then equal padding on the top and the bottom .If the height of the image is tooo big then I am trying to add -ve padding at the top and center the image . All these are done dynamically in portrait mode . If the phone is turned into landscape all the padding should be removed

If you are trying to detect orientationchange you will need to do some reading. http://api.jquerymobile.com/orientationchange/ — Cam, May 23 '14 at 15:19
no css will not help they add the attributes in style="" like inline and we can't change an inline attribute using Media Queries — Vikram Anand Bhushan, May 23 '14 at 15:20
This seems like shipload of trouble when you could just define new classes and use those. — Paulie_D, May 23 '14 at 15:21
@Paulie_D but the height and width of the images has to be calculated dynamically using JS and then should be added to the class — Vikram Anand Bhushan, May 23 '14 at 15:28
@Paulie_D I am trying to add padding to the image which are bigger or smaller than the div . Like if its height is smaller then equal padding on the top and the bottom .If the height of the image is tooo big then I am trying to add -ve padding at the top and center the image . All these are done dynamically in portrait mode . If the phone is turned into landscape all the padding should be removed — Vikram Anand Bhushan, May 26 '14 at 07:21
@LGVentura yes bro updating the .css file but I see its too complicated so is there any other way to do this I have explained what I want to do in the previous comment — Vikram Anand Bhushan, May 26 '14 at 07:23
You could bind a function to resize and orientationchange, ill try and write something out later. — lharby, May 26 '14 at 07:48

score 2 · Answer 1 · answered May 27 '14 at 06:18

I can give small Input on your code. Instead "ATTR", you can directly Use "CSS" method to apply inline style to any element.

It will behave same like Attribute Style.

Instead of this:

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

You can Use this:

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

Out put will be same as you Desired:

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

score 1 · Answer 2 · edited May 23 '17 at 11:46

1

I believe what you are really after is not "attributes" but changing "rules", the same as this person: Changing a CSS rule-set from Javascript

That said, I'm not sure you wouldn't be better off simply using the class selectors to find all of the applicable elements and directly changing their styles. But it can be done.

edited May 23 '17 at 11:46

Community

1
1

answered May 23 '14 at 15:33

tmcgill

76
5

saw it bro pretty complicated stuff though . I am just a beginner in JQuery and stuff – Vikram Anand Bhushan May 26 '14 at 07:22

score 1 · Accepted Answer · answered May 29 '14 at 04:23

My first suggestion would be for you to look for another option of vertical alignment. Have a look at display: inline-block, or display: table-cell, and see if you can use with vertical-alignment: middle;. - http://css-tricks.com/centering-in-the-unknown/

Second suggestion would be to use the !important statement, inside your media query. That way you could use inline styles (jQuery.css()) to define paddings on portrait, and override on landscape:

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

Third suggestion would be to write some new css to the page using javascript:

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>");

Is it possible to add attribute to a class using JQuery .attr() tag?

3 Answers3