How to add multiple CSS elements to a div using jQuery?


Tags: jquery,css

Problem :

I would like to do this:

<div style="float: left;
            width: 59px;
            background: transparent url('http://download.com/47.jpg') no-repeat scroll -132px -1px;"
     class="cIconSmall">
</div>

and I'm thinking I should use this:

$("#YourElementID").css({
    float: "left",
    width: "59px",
    background: "transparent url('http://download.com/47.jpg') no-repeat scroll -132px -1px"
});

Any ideas?

Thanks



Solution :

You're thinking correctly. Using the css(map) method is the way to go.

$(".cIconSmall").css({
    float: "left", 
    width: "59px", 
    background: "transparent url('http://download.com/47.jpg') no-repeat scroll -132px -1px" 
});

http://api.jquery.com/css/

A map of property-value pairs to set.


Might be nicer as a css class, though... then you can just write $(".cIconSmall").addClass("icon47"); but there's a time for everything...


    CSS Howto..

    How to use jQuery to horizontally center an object in the viewport?

    How to get correct overflow for proper div with fixed footer?

    How to make one Div's position (not child or parent) completely linked / dependent on another Div's position?

    How can I add custom search box on page?

    asp .net: how to change css on span tag in c#

    CSS question. How can I get blueprint css to work rails tabnav widget?

    How can I simply add a css file to change the background color for my shiny app

    How to attach stylesheet to HTML email?

    How to set a image over another in the same tag via CSS?

    how to achieve following using css ( digits input )

    How to apply this sidebar to all pages using CSS?

    How do I make my CSS link up to files in different directories

    how to collapse navbar in twitter bootstrap after click on link if it woud be collapsed because of css? [closed]

    CSS HTML how to ignore some css for non ie7 or ie8

    CSS How to display a single icon out of a matrix for a list item

    How to make a picture hover over others without moving the other pictures?

    CSS How to change background color of text?

    How to assign a css class or id to smileys?

    How to check if Html element has a background-image css property in WebBrowser control C#

    How to select text that is not marked up with CSS/jquery?

    How to make IE 9 work with Bootstrap Multiselect plugin by davidstutz?

    How can I make images stack on top of each other as web page scales down?

    CSS - How to make position:absolute work not on all 100% screens area

    How to get 2 fixed and 1 dynamic column in CSS

    Wordpress plugin: How to depend on other plugins?

    how do I modify a :hover style using JavaScript / jQuery?

    How to add text using css in textarea? [closed]

    HTML/CSS: How to move my navigation bar to the middle?

    How to create two column in form using css

    Jquery how to get specific css values from css properties with stacked value options such as font-family