Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions entries/css.xml
Original file line number Diff line number Diff line change
Expand Up @@ -152,9 +152,9 @@ $( "div" ).on( "click", function() {
<ul>
<li>setting the element position: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code></li>
<li>setting the element dimensions: <code>width</code>, <code>height</code>, <code>min-width</code>, <code>min-height</code>, <code>max-width</code>, <code>max-height</code></li>
<li><code>padding-related</code>: <code>padding</code>, <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code></li>
<li><code>margin</code>-related: <code>margin</code>, <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, <code>margin-left</code></li>
<li><code>border</code>-related: <code>border</code>, <code>border-width</code>, <code>border-top</code>, <code>border-top-width</code>, <code>border-right</code>, <code>border-right-width</code>, <code>border-bottom</code>, <code>border-bottom-width</code>, <code>border-left</code>, <code>border-left-width</code></li>
<li>padding-related: <code>padding</code>, <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code></li>
<li>margin-related: <code>margin</code>, <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, <code>margin-left</code></li>
<li>border-related: <code>border</code>, <code>border-width</code>, <code>border-top</code>, <code>border-top-width</code>, <code>border-right</code>, <code>border-right-width</code>, <code>border-bottom</code>, <code>border-bottom-width</code>, <code>border-left</code>, <code>border-left-width</code></li>
</ul>
<p>When using <code>.css()</code> as a setter, jQuery modifies the element's <code>style</code> property. For example, <code>$( "#mydiv" ).css( "color", "green" )</code> is equivalent to <code>document.getElementById( "mydiv" ).style.color = "green"</code>. Setting the value of a style property to an empty string &#x2014; e.g. <code>$( "#mydiv" ).css( "color", "" )</code> &#x2014; removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's <code>.css()</code> method, or through direct DOM manipulation of the <code>style</code> property. As a consequence, the element's style for that property will be restored to whatever value was applied. So, this method can be 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 <code>&lt;style&gt;</code> element. <strong>Warning:</strong> one notable exception is that, for IE 8 and below, removing a shorthand property such as <code>border</code> or <code>background</code> will remove that style entirely from the element, regardless of what is set in a stylesheet or <code>&lt;style&gt;</code> element.</p>
<p><strong>Note:</strong> <code>.css()</code> doesn't support <code>!important</code> declarations. So, the statement <code>$( "p" ).css( "color", "red !important" )</code> does not turn the color of all paragraphs in the page to red as of jQuery 3.6.0. Do not depend on that <em>not working</em>, though, as a future version of jQuery may add support for such declarations. It's strongly advised to use classes instead; otherwise use a jQuery plugin.</p>
Expand Down