The JQuery .css() method provides a function to set CSS properties and values for any element. The .css() method will also retrieve the value of any CSS poperty for any element.
To set a CSS property use of the of the following methods.
.css(property,value);
Using this system set the property as the first parameter and the value as the second. Both parameters should strings. Use the standard CSS property names, the same as used in your CSS style sheet. For example:
$('p').css('color', '#F00');
The line above would find all p tags on a page and set the color to red.
Sometimes you may want to set multiple properties at once. In these cases use this syntax.
.css({prop:value,prop:vlaue,...});
In this case pass one parameter, an object containing all of the properties and values to be set. Since property names set in the object can not contain special characters you’ll need to alternate property names. For example normally you would use background-color in your CSS style sheet. When using an object property list the – (hyphen) is not allowed. Instead use: backgroundColor. Notice I removed the unacceptable character and began the next word with an uppercase letter. For example:
$('p').css({lineHeight:'18px',letterSpacing:'0.1em'});
The example above sets the line height and letter spacing of all p elements.
Alternately, the CSS property name can be used as long as it is wrapped in quotes. For example the line above could alternatively be written as:
$('p').css({'line-height':'18px','letter-spacing':'0.1em'});
The value of any property may also be retrieved. For example, imagine you wanted the font-size of one element to match the font-size of another.
$('li').css('font-size', $('#headline').css('font-size') );
The line above sets the font size of all li elements to the same font-size as that of the element with the id name #headline.
Hello — This is exactly the kind of stuff I need. But, jQuery is really new to me. Looks like it’s time to take on a new project: learn jQuery, as it seems full of possibilities.
Ok, what I need to do is get the height of the (CSS) .content value from the stylesheet so I can use that value in the sidebar.php template to set the sidebar height. The PHP is easy to set; getting the CSS value I was clueless about until reading this great post.
I’ve read and re-read the above information but can’t quite figure how to get the value from a specific class. In your –> $(‘li’).css(‘font-size’ , do I simply substitute ‘.content’ for the ‘li’ ?
Next, do I need to “load” jQuery into a template, like header.php?
Finally, how do I add your –> $(‘p’).css(‘color’, ‘#F00’);
to the section of the sidebar.php template? I mean, what is the variable I use out of that string? Do I do (in PHP) $mywidth = $(‘p’).css(‘color’, ‘#F00’); ? That would be too simple, right? 🙂
Ok, taken enough of your time. Help on this would be much appreciated, believe it.
Mike