Develop Reference

How to select $(this) and .class to do something in one line?

I know this is a silly question but how can I toggleClass() in a single line to both selectors.
$('.search-ico').click(function(){
$(this).toggleClass('is-active');
$('.class').toggleClass('is-active');
});
I tried below:
$('.search-ico').click(function(){
$(this,'.class').toggleClass('is-active');
});
but it's not working (only this is taking the class).
Thanks

you can use the .add method to combine string selectors and this.
https://api.jquery.com/add/
Use it like this:
$(this).add('.class').toggleClass(...)

Assuming the elements of class search-ico carry an id attribute, you can compose the selector string:
$("#" + $(this).attr('id') + ", .class").toggleClass("is-active")

note you can also add properties to the first object before adding a second object to it, and whatever property you add after the second object applies to all of them..
$(this).css('property','value').add('.class').toggleClass(...)
so here the css property of (this) is altered first.. before added to the second object, and then the toggleClass applied to all of them..

How to use Javascript to add multiple style properties to one element?

I've tried various renditions of this code to try and change a certain element for a coding exercise but non of them seems to be able to change multiple styling properties of an element on a button click. Would love some assistance. Thanks!
document.getElementById("Combo Style").onclick = function() {
document.getElementById ("More Text").style.fontSize.color = "50px , #BB65C5";
}

You can use cssText property but it will change the styling for the element completely
Style cssText Property
document.getElementById("myP").style.cssText = "background-color:pink;font-size:55px;border:2px dashed green;color:white;"
This will overwrite the existing css styling for that element , so make sure you included every needed property.

To achieve your expected result use setAttribute
HTML:
<button id="Combo Style">Change</button>
<div id="More Text">abcd</div>
JS:
document.getElementById("Combo Style").onclick = function() {
document.getElementById("More Text").setAttribute("style", "font-size:50px;color:red;");
}
http://codepen.io/nagasai/pen/AXVWwO

You need to grab the element by using id or any selector and use style property or css text property to apply css. Check the below code -
var element=document.getElementById("More Text");
element.style.fontSize="20px";
element.style.color="red";
element.style.background="blue";
You can also use cssText property, like -
document.getElementById("More Text").style.cssText='fontSize="20px";color="red";'
This will insert an inline style tag in the element with the csstext property.

How to access inline css style atribute and change proprties in DOM using jquery?

I need to change the DOM dynamically. I want to access the 'text-align' and the 'line-height' properties.
for example:
<p style="line-height:1.0;text-align:justify;">
I need to access all the style attributes in the DOM and go through each 'text-align' and 'line-height' properties and change their values. How to access these properties.
Actually what I need to do is go through these two properties and change the text-align to left and change the line-height to 1.5 if it's less than 1.5
Thank you so much inadvance.

You can use $("#selector").css({'property' : 'value'});
from the docs : http://api.jquery.com/css/
You can set properties using this method.
Edit :
to check if an element has a css style, you can use the following SO answer :
jQuery: check if element has CSS attribute

You can use .css method to achieve this:
$('p').css({'lineHeight':'1.0','textAlign':'right'})
Update:
If you want to select all elements that has line-height style you can use following selector:
$('*[style*="line-height"]').css({'lineHeight':'1.5'})

Try:
$(document).ready(function(){
$("*").each(function(){
alert($(this).css('lineHeight'));
if($(this).css('lineHeight')){
$(this).css({'lineHeight':'1.0'});
}
if($(this).css('textAlign')){
$(this).css({'textAlign':'right'});
}
});
});
Here $("*") will select all elements in DOM and then .css("propName") will check whether the propName property exists in that element's css. and if it exists then .css({'propname':'newValue'}); will assign a new value to that property.
Hope it helps.

As mentioned before, you can use:
$('p').css({'lineHeight':'1.0','textAlign':'right'});
You can also use:
$('p').css('lineHeight', '1.0');
$('p').css('textAlign', 'right');
Although not recommended, because this would replace all other styles, you could even do:
$('p').attr('style', 'lineHeight: 1.0; textAlign: right;');
To select all elements on the dom, just use the $('*') selector.
$(document).ready(function(){
$("*").each(function(){
// 1.0 == 16px | 1.5 == 24px
if(parseInt($(this).css('lineHeight'), 10) < 24){
$(this).css({'lineHeight':'1.5'});
}
});
});
HERE is the JSFiddle

Unable to replace the class of div element - no method named css

I want to replace the old class of html element with the new one using jQuery. Here is what I'm doing:
var elem = $('.my_selector')[0];
elem.css('class', 'my_new_class');
But I get the error saying "Uncaught type error: Object#<HtmlDivElement> has no method css.
How do I fix it?

The problem is that you are trying to call jQuery method css() (even not relevant here) from DOM element, which is derived with [0]. You can use toggleClass() to do the job:
$(".my_selector:first").toggleClass("my_selector my_new_class");

$('.my_selector')[0] is returning you a DOM element, not a jQuery Object. You'll also want to use the addClass method rather than css. To get the first element, you can use the :first pseudoselector.
So this should be what you are looking for:
$('.my_selector:first').removeClass('my_selector').addClass('my_new_class');
EDIT You can use either removeClass/addClass or toggleClass. Either are fine. Explicitly adding the new class may be safer if you have a case where an element can have both classes at the same time since toggleClass will remove both classes.

var elem = $('.my_selector')[0];
This will return the DOM element, not a jQuery object. Simply change it to this...
var elem = $('.my_selector');
To get just the first element that matches the selector, use this...
var elem = $('.my_selector').first();
Also, you have...
elem.css('class', 'my_new_class');
This is incorrect and should be changed to this...
elem.attr('class', 'my_new_class');

Try this ,
var elem = $(".my_selector");
elem.class("newclass");
otherwise you can do,
var elem = $(".my_selector");
elem.removeClass("my_selector");
elem.addClass("newclass");

$(".my_selector").removeClass('currentClass').addClass('newClass');

As said, you need the jquery object of the first element. A good method could be this:
$('.my_selector').first().css('class', 'my_new_class');
Moreover the method signature is .css( propertyName, value ) so its intented to set a css property not to change a class. To do that you need to remove old class and add new one with .removeClass and .addClass respectively.

$($('.my_selector')[0]).css('class', 'my_new_class');
document.getElementsByClassName('my_selector')[0].className = 'my_new_class';

Select all elements that have a specific CSS, using jQuery

How can I select all elements that have a specific CSS property applied, using jQuery? For example:
.Title
{
color:red;
rounded:true;
}
.Caption
{
color:black;
rounded:true;
}
How to select by property named "rounded"?
CSS class name is very flexible.
$(".Title").corner();
$(".Caption").corner();
How to replace this two operation to one operation. Maybe something like this:
$(".*->rounded").corner();
Is there any better way to do this?

This is a two year old thread, but it was still useful to me so it could be useful to others, perhaps. Here's what I ended up doing:
var x = $('.myselector').filter(function () {
return this.style.some_prop == 'whatever'
});
not as succinct as I would like, but I have never needed something like this except now, and it's not very efficient for general use anyway, as I see it.

Thank you, Bijou. I used your solution, but used the jQuery .css instead of pure javascript, like this:
var x = $('*').filter(function() {
return $(this).css('font-family').toLowerCase().indexOf('futura') > -1
})
This example would select all elements where the font-family attribute value contains "Futura".

You cannot (using a CSS selector) select elements based on the CSS properties that have been applied to them.
If you want to do this manually, you could select every element in the document, loop over them, and check the computed value of the property you are interested in (this would probably only work with real CSS properties though, not made up ones such as rounded). It would also would be slow.
Update in response to edits — group selectors:
$(".Title, .Caption").corner();

Similar as Bijou's. Just a little bit enhancement:
$('[class]').filter(function() {
return $(this).css('your css property') == 'the expected value';
}
).corner();
I think using $('[class]') is better:
no need to hard code the selector(s)
won't check all HTML elements one by one.
Here is an example.

Here is a clean, easy to understand solution:
// find elements with jQuery with a specific CSS, then execute an action
$('.dom-class').each(function(index, el) {
if ($(this).css('property') == 'value') {
$(this).doThingsHere();
}
});
This solution is different because it does not use corner, filter or return. It is intentionally made for a wider audience of users.
Things to replace:
Replace ".dom-class" with your selector.
Replace CSS property and value with what you are looking for.
Replace "doThingsHere()" with what you want to execute on that
found element.
Good luck!

Custom CSS properties aren't inherited, so must be applied directly to each element (even if you use js to dynamically add properties, you should do it by adding a class), so...
CSS
.Title
{
color:red;
}
.Caption
{
color:black;
}
HTML
You don't need to define a rounded:true property at all. Just use the presence of the 'Rounded' class:
<div class='Title Rounded'><h1>Title</h1></div>
<div class='Caption Rounded'>Caption</div>
JS
jQuery( '.Rounded' ).corner();