CODEWITHSUNDEEP
jqueryinternet-explorergoogle-chromecsssafari
DroidOS
DroidOS

Reputation: 8880

jQuery dynamic CSS attribute assignment

Assigning CSS attributes on-the-fly in jQuery is easy enough. e.g.

$('#element').css('fontWeight','bold');

However, the dynamic assignment I currently need to do is rather more messy. In order to have background gradient assignments to work on a range of browsers I need to do

background-image:-moz-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-webkit-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-o-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-ms-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);

$('#element').css('backgroundImage','value')

called repeatedly will not work since jQuery simply overwrites the previously written version. How else can this be done?

Upvotes: 0

Views: 211

Answers (3)

Ahmed Assaf
Ahmed Assaf

Reputation: 601

You can do class :

BackgroundClass
{
background-image:-moz-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-webkit-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-o-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-ms-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
}

and add this class to the element :

$('#element').addClass("BackgroundClass");

Upvotes: 0

nowhere
nowhere

Reputation: 1548

Since you're using jQuery why don't you use this plug-in? http://archive.plugins.jquery.com/project/gradient

You can then easily use it:

$('.gradient').gradient({ from: '003366', to: '333333' });

Upvotes: 0

Yash Singla
Yash Singla

Reputation: 144

The solution would be to create a class with the required properties, add it to your stylesheet and use .addClass to assign class to the element dynamically.

CSS:

.gradientClass{
background-image:-moz-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-webkit-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-o-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-ms-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
}

Jquery:

$('#element').addClass('gradientClass');

Upvotes: 3

Related Questions