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 force CSS3 slideshow animation to display in correct order?

    How to make margins collapse evenly?

    How to align text flush with bottom of container using CSS?

    How to add an unknown amount of dots to a line depending on length of word?

    how to change single li element in a menu using lists?

    CSS : How to add an absolute div to a scrollable background? [closed]

    How to have a multiline CSS horizontal scroll?

    css: how to format contact entry screen

    How can I create a bold/“cursor” border around a table cell?

    How to retain rectangular border around button when clicked

    How can I add shading to edges of the default ASP.NET page?

    When displaying an image in my directory, how to add a return (or back) button to it?

    How to center items inside isotope container?

    How to set background color in border in CSS

    How to implement padding-free sprites in css?

    How can I make a similar shape to a parallelogram in css?

    How a checkbox will trigger another input element in html via javascript?

    How to center the center circle?

    How to define the width of a HTML element dynamically

    Dompdf: how to get background image to show on first page only

    How to inherit CSS Menu on each html page linked on Homepage without using any javascript and templates

    Creating a responsive drupal 7 slideshow

    Node/Grunt - Autoprefixer - How to add configuration to my Gruntfile.js & how to check supported browsers?

    How to choose font different font-weight? use bolder one or just font-weight?

    How do I position a div below an image with changing height?

    How are these sites implementing their onhover overlays?

    css/javascript - How to achieve these unusual design requirements? [closed]

    How to create 2 separate SVG without blocking other div elements?

    how to center text vertically in html using css only

    How to put my form on top of an image in css/html?