jQuery .css底部属性未将CSS应用于元素

Question

   var startingWindowSize = $(window).width();
   var startPercent = 70;
    if( startingWindowSize >= 1920 )
    {
        startPercent = 70; 
        $('.rsImg').css({bottom: startPercent+"%"});    
    }
    else if( startingWindowSize >= 1440 )
    {
        startPercent = 40;  
        $('.rsImg').css({bottom: startPercent+"%"});   
    }
    else if( startingWindowSize >= 1280 )
    {
        startPercent = 18; 
        $('.rsImg').css({bottom: startPercent+"%"});        
    }
    else
    {
        startPercent = 10; 
        $('.rsImg').css({bottom: startPercent+"%"});        
    }

Why would this code not be working? It refuses to add the style to the tag. There is already some css being added before this code before this snippet by a javascript slider plugin. Could this be the cause? The slider can be found here .

Answer 1

Are you sure $('.rsImg') actually refers to the correct item?
Try alert($('.rsImg').size()) to double-check that it actually found what you think it did.

Also, are you sure this code is running after the page has finished loading? Is it in an onready callback function?

This isn't entirely related, but your code can be simplified by only doing the .css() call once:

var startingWindowSize = $(window).width();
var startPercent = 10;

if (startingWindowSize >= 1920) startPercent = 70; 
else if (startingWindowSize >= 1440) startPercent = 40;  
else if (startingWindowSize >= 1280) startPercent = 18; 

$('.rsImg').css({bottom: startPercent+"%"});