CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Thor
Thor

Reputation: 10048

jquery, setting css property to empty string

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.

Upvotes: 0

Views: 2889

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

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.

Upvotes: 4

Related Questions