Do jquery styles change after the css class changes? - javascript

I am new to jquery, and I was looking at the .css() function. I also looked at the .addClass() and the .removeClass(). If I use .css(), on a element and then I change the element's class, would the element still have the styles that I put from .css()? Here is some example code:
$(".myClass").css({
"someStyle": "someValue"
});
setTimeout(function() {
$(".myClass").removeClass("myClass");
// Do the styles still exist?
}, 1000);

This code:
$(".myClass").css({
"someStyle": "someValue"
});
is not adding those styles to the class myClass. It's doing two completely separate and unrelated things:
Looking up elements using a CSS selector (in this case, a class selector), and
Adding styles to those elements directly (e.g., to the elements' style objects).
Removing the class later has no effect on the styles directly attached to the elements.

Answer is No.
The function .css() add inline styles to the DOM element, even if the class is remove later it will have no effect with the CSS rule applied using .css() method.

Related

Understanding .removeClass in jQuery

Can some one please explain to me what exactly is this jQuery call doing
$("header").removeClass("alternative full-width").addClass("full-width");
What exactly is it doing to the CSS file, Many Thanks
removeClass() function will remove the css selector applied to the element. In your case, if the header element has css attribute with value "alternative full-width", then those will be removed and it will add "full-width"
I also observe that, the above code has two values and you're trying to remove those two and add one of them.
Instead you could do this -
$("header").removeClass("alternative");
since you wish to add "full-width" which is already available!
NOTE I assume the .full-width css value is constant in that field. If it's not the case, we may have to use hasClass() to determine the existence!
For more info on removeClass - https://api.jquery.com/removeclass/
What exactly is it doing to the CSS file?
It has no effect on the CSS file
Can some one please explain to me what exactly is this jQuery call
doing
it remove the classes ( alternative and full-width )from the header with removeClass() and then it add the class ( full-width ) with addClass()
Header Element
$("header")
Select a header tag via JQuery
.removeClass("alternative full-width")
This method remove the "alternative full-width" class
.addClass("full-width")
This method add the "full-width" class.
As a matter of fact the JQuery it doesn't do anything in the CSS file.The only thing that is done with this example is to inherit the class properties that you have alredy define in the css file

When to use the css element/class selector in javascript?

I'm currently working on the codecademy course on building an interactive website and I stumbled upon an ambiguity concerning the use of the elemement/class selection of the css elements.
javascript:
var main = function() {
$('.article').click(function() {
$('.article').removeClass('current');
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
});
};
css:
.current .item {
background: rgba(206,220,206,.9);
}
Why do I have to use the element selector 'current' instead of the class selector '.current' in line 4? Is there any rule behind it or just a specification of jquery?
Simply because the name of the class is current not .current, and in
$('.article').removeClass('current');
current is not any selector but just a classname which you want to remove, instead the selector is .article.
You are thinking that we are using element selector instead of class selector. But you are wrong. Do you see the word Class in removeClass and addClass ? It means you are passing class selector, not element selector as an argument.
Now you may ask why don't you see dot with current? Because classes are specified using dot. Actually we have already specified that we are passing Class Selector, as you can see word "Class" in removeClass and addClass .
as per docs addClass():
Adds the specified class(es) to each of the set of matched elements.
Hence, you need to pass the classname/names as parameter and not class selector built out of it.
In addClass/removeClass you use a class name (like the one you'd specify in the class attribute of your html), not a DOM selector like in $().
The function name removeClass() implies you have to state a class name. Using a selector you have to specify either you want to select a class or an ID.
The addClass and removeClass methods accept one or more space-separated classes to be removed from the class attribute of each matched element. The name of the calss you want to add/remove is "current", not ".current"
http://api.jquery.com/removeclass/
http://api.jquery.com/addclass/
In line 4, you are not using 'current' as a selector, it is a class name. Whenever you use some class name as a selector( for example in .find('.current'), $('.current') , closest('.current') etc) then only the rule of putting.for class name#` for id etc are used. And whenever you are checking some class exists( .hasClass()), adding and removing a class(addClass('current'), removeClass('current'),then you have to mention correct class name. I hope it helps.

JQuery - show/hide style attribute overriding css

I understand how CSS works in that the styling applied closest to the element overrides any previous styles. My question is, how do the JQuery functions show() and hide() operate when there is a style attribute defined to a <div> tag like this:
<div class='menuTab' style="display:block">
For the sake of this example, assume that the css is something like:
div.menuTab{
/* ..other css...*/
display:none
}
Would applying the function $('div.menuTab').hide() change the style attribute of the menuTab HTML to display:none?
In short: Yes.
.hide() is shorthand for:
.css("display","none");
So it will override your display:block inline style with display:hidden.
Unless !important is used, inline styles override CSS.
Yes.
$('div.menuTab').hide() will result in style="display:none"
Yes,
It will hide the class and override its property.
.hide()
is shorthand for:
.css("display","none");
It will override
.css("display","block");
As you can see in inspect element of chrome
If you use $('div.menuTab').hide(); js will change style in html literally as display:none;
Here you have an example. You can see the .hide() function changes the display from block to none.
http://jsfiddle.net/2tfuxzq5/3/
Hope it helps!
You may easily find how .hide() works by checking jQuery source (search for: function showHide).
jQuery .hide() and .show() are wrappers for jQuery.css() which change element's style.display property depending on its type (.hide() to display = 'none' and .show() to 'inline', 'block' etc).

Removing effect of a CSS selector

My requirement is a bit tricky. I have a mark-up as below: (just an example, real mark-up is very complicated)
<div class="classA">
<div class="classB">
<p class="classC">
<span class="classD">
</span>
</p>
</div>
</div>
As you can see above, there are four CSS classes classA, classB, classC, classD associated with the markup.
Also I have used jQuery to bind events using these selectors.
My Requirement: I want the jQuery event binding to work and at the same time, the CSS should not get applied i.e. I want to negate the impact of CSS styles from a UI perspective, but from functional perspective jQuery event handlers should still work.
So, is it possible to override the CSS selectors such that their styles don't get applied to my mark-up elements ?
example below:
div.classA div.classB p.classC span.classD{
color:red;
}
I don't want the font color to be red, so I tried to override the selector as follows, but its not working:
div.classA div.classB p.classC span.classD{
color:red;
}
div.classA div.classB p.classC span.classD{
/*no styles here*/
}
Please help !!
Then just delete those classes from css. jQuery will still work though.
There is no requirement that only classes used in css have to be used in jquery.
For example:
<div class="someUnknownClass"></div>
Even though, there is no someUnknownClass defined in css, $('.someUnknownClass') will still work.
Use another class name for the selector. So you have classA for the css and classX for the selector.
If you don't want the styles applied. Then you could use $('selctor').css(); to over write the styles. Bit hacky!
OR.
Add a class that over-rides the css. Or remove the class that holds the css.
using: $('selctor').addClass('no_styles'); OR $('selctor').removeClass('current_styles');
I don't know any mechanism allowing to do that the way you want it.
the work around i would suggest would be binding your events on anoter css class and doing something like this :
$('.classD').addClass('eventClassD').removeClass('classD');
$('.eventClassD').on('myEvent', function(){...});
like this you will still have events binded to your elements and would get rid of all the css.
You want to do it without modifying the JS? There's no clean way to do that. But try this.
Presumably you will have something that distinguishes this special set of elements to distinguish it from other elements, of which styles' you want to retain. This is difference probably manifests itself in the form of a different parent container. Just copy the set of CSS rules that affect these classes, and prepend this parent CSS selector with the pre-class values.
"Basically, I do not want to touch the js code, and only if something can be done on the css front, then my requirement is achieved."
If that is all you need, then just remove all of the css definitions from the page.
$("link,style").remove()

Javascript and CSS table header colors

I have a Javascript function when this returns a particular value I would like to change the colors of various table header using their id.
How can I change the colour of a table header in javascript I know how in CSS, or should I somehow conditionally call the CSS to do this?
Thanks,
Van
In your Javascript you'll want to change the class name of the table header in question.
This way you will keep your styles in you CSS and simply switch out the class name on the header, thus changing the style.
I suggest using the jQuery Javascript framework to make your life a lot easier and using its addClass() method.
Change the element class with another class defined in your CSS stylesheet.
document.getElementById('headerID').style.color = '#{color}';
See this Fiddle: http://jsfiddle.net/maniator/55Z8K/
You can easily manipulate CSS in Javascript. For example, this jQuery snippet changes the background colour of an element when condition 'x' is true:
if(x) $('#test').css('background-color', 'green');
… that's very simplistic of course: it would be far better to change the relevant element's class to something else, and define the various class styles in your CSS.
Based on the return of the function, you could add/remove a class from the element, causing its colors to change.
document.getElementById('FOO').className += 'new-class'
Alternatively, you can change the style of an element in JavaScript in the following way
document.getElementById('FOO').style = { color: '#FFF', backgroundColor: '#000' };
Refer to This reference on the JavaScript names of style options.

Categories