CODEWITHSUNDEEP
javascriptjquerycss
j7nn7k
j7nn7k

Reputation: 18612

Build JavaScript Object to use with jQuery .css() (what about duplicate keys?)

I use jQuery's .css() method to apply styles to an element. I do this like so:

var cssObj = {
    'background-color' : '#000',
    'background-image': '-webkit-linear-gradient(top,#000,#fff)',
    'background-image': 'linear-gradient(top,#000,#fff)'
};

$(".element").css(cssObj);

The problem with this is that obviously I use duplicate keys in the object, which is not cool.

How can I solve this problem? I need to pass the CSS params with duplicate names to address most browsers.

Upvotes: 7

Views: 907

Answers (5)

Aleksandar Totic
Aleksandar Totic

Reputation: 2597

There is a repository of cssHooks on github for most properties. Writing your own hook is tricky, lots of edge cases.

https://github.com/brandonaaron/jquery-cssHooks

For background image gradient, you'd need:

https://github.com/brandonaaron/jquery-cssHooks/blob/master/gradients.js

Upvotes: 0

alx
alx

Reputation: 2367

It looks like you imply that .css() method works like CSS attributes in a .css file. I don't think it works like that. But here are few alternatives:

  1. Use browser sniffing (why not? you already doing multi-browser CSS with vendor prefixes)

  2. Use actual stylesheet linked as <link /> tag

  3. Create <style> tag and add rules to it, dynamically.

  4. Use style attribute: $('#my').attr('style', 'background: ...; bakground: ...; border-radius: ...; -moz-border-radius: ...;');

Upvotes: -1

Rob W
Rob W

Reputation: 349252

Having multiple keys with the same name is not valid, and will generate an error in strict mode.

Create a function/plugin which applies the properties of your cssObj. If a string-string pair is found, set a CSS property with the desired value.
If an array is found, loop through it, and update the property with each value. If an invalid value is found, it's ignored.

DEMO: http://jsfiddle.net/RgfQw/

// Created a plugin for project portability
(function($){
    $.fn.cssMap = function(map){
        var $element = this;
        $.each(map, function(property, value){
            if (value instanceof Array) {
                for(var i=0, len=value.length; i<len; i++) {
                    $element.css(property, value[i]);
                }
            } else {
                $element.css(property, value);
            }
        });
    }
})(jQuery);

// Usage:
var cssObj = {
    'background-color': '#000',
    'background-image': ['-webkit-linear-gradient(top,#000,#fff)',
                         'linear-gradient(top,#000,#fff)']
};
$(".element").cssMap(cssObj);

Upvotes: 11

Rory McCrossan
Rory McCrossan

Reputation: 337713

My advice would be to put your CSS into your stylesheet in it's own class, and simply add that class to your element instead. The browser itself will determine which of the background-image properties it supports, and will therefore only render that one.

CSS

.gradient-bg {
    background-color: #000;
    background-image: -webkit-linear-gradient(top, #000, #fff);
    background-image: linear-gradient(top, #000, #fff)
}

jQuery

$(".element").addClass("gradient-bg");

Upvotes: 2

Esailija
Esailija

Reputation: 140234

You need to create a custom $.cssHooks (more info) that determines which one is the correct form, by doing various tests --- or you could just use a css class with $.fn.addClass.

Upvotes: 0

Related Questions