0

I'm currently studying the jquery css() method.

In the .css() documentation, it states

enter image description here

However, I'm not exactly sure what they meant by used to cancel any style modification you have previously performed. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or element..

So I looked up MDN page on HTMLElement.style, which states

enter image description here

I also experiment by setting one of the property of HTMLElement.style to "" (i.e. an empty string)

enter image description here

So it seems that by setting color property of d.style to "", I have removed the value of color property, and the color property was not removed from d.style.

But what does the documentation mean by It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or element.

1
  • 1
    Inline styles, ie style attribute/property, override styles defined in stylesheets and style tags. By clearing out the value in inline styles it just means it's going to go back to using whatever the value maybe in stylesheets/style tags. It does not mean the actual property will be removed from the style object Commented Apr 10, 2018 at 4:03

1 Answer 1

4

The .css() method can remove inline styles (denoted by style=""):

var target = document.getElementById('target');
$('#target').css('color', '');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="target" style="color: red">Target</div>

But not styling rules that have been defined in a CSS stylesheet:

var target = document.getElementById('target');
$('#target').css('color', '');
#target {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="target">Target</div>

Nor will it work for styling inside <style> tags written in the same file:

var target = document.getElementById('target');
$('#target').css('color', '');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="target">Target</div>

<style>
#target {
  color: red;
}
</style>

This is because the CSSStyleDeclaration object is a read-only interface to Window.GetComputedStyle(), which is used to retrieve the stylesheets.

The Window.getComputedStyle() method returns an object that reports the values of all CSS properties of an element after applying active stylesheets and resolving any basic computation those values may contain.

Element.style returns a CSSStyleDeclaration object, and is also read-only:

Styles should not be set by assigning a string directly to the style property (as in elt.style = "color: blue;"), since it is considered read-only, as the style attribute returns a CSSStyleDeclaration object which is also read-only.

jQuery's css() method itself attempts to modify the style property, and thus it can only update inline styles:

When using .css() as a setter, jQuery modifies the element's style property. [ ... ] Setting the value of a style property to an empty string — e.g. $( "#mydiv" ).css( "color", "" ) — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. [ ... ] It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or element.

Sign up to request clarification or add additional context in comments.

3 Comments

hi Obsidian, thank you very much for helping out. Do you mind if I ask how you became so knowledgeable? What is the learning path you have travelled? I want to learn how others have studied in the past, so I can become a better programmer :)
No problem, and that's kind of you to say... though I still have much to learn myself. I personally picked up my skills by working as a front-end developer for about a decade. The best advice I can give is to study reliable and official documentation like MDN, and learn through doing. Writing answers on StackOverflow really helps in that regard! And along that vein, StackOverflow is specifically a question-answer site, so I can't really give you any extended advice, but I do wish you luck, and hope that my answer helps you :)
thanks Obsidian! your answer definitely cleared up my confusion. So glad there are many people like you on stackoverflow helping people out.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.