Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>With jQuery:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>// Scoping function just to avoid creating a global (function() { var $p = $("&lt;p&gt;&lt;/p&gt;").hide().appendTo("body"); console.log($p.css("color")); $p.remove(); })();</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>p {color: blue}</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre> </div> </div> </p> <p>Using the DOM directly:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>// Scoping function just to avoid creating a global (function() { var p = document.createElement('p'); document.body.appendChild(p); console.log(getComputedStyle(p).color); document.body.removeChild(p); })();</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>p {color: blue}</code></pre> </div> </div> </p> <p><strong>Note:</strong> In both cases, if you're loading external style sheets, you'll want to wait for them to load in order to see their effect on the element. Neither jQuery's <code>ready</code> nor the DOM's <code>DOMContentLoaded</code> event does that, you'd have to ensure it by <a href="https://stackoverflow.com/questions/2635814/javascript-capturing-load-event-on-link">watching for them to load</a>.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload