JavaScript Style Sheets

<h2 id="syntax">Syntax</h2>
<p>Using <a href="/facts/JavaScript/XhhIIEsl">JavaScript</a> code as a stylesheet, JSSS styles individual element by modifying properties of a document.tags object. For example, the CSS:
</p>
 h1 { font-size: 20pt; }

<p>is equivalent to the JSSS:
</p>
 document.tags.H1.fontSize = "20pt";

<p>JSSS element names are case sensitive.
</p><p>JSSS lacks the various CSS selector features, supporting only simple tag name, class and id selectors. On the other hand, since it is written using a complete <a href="/facts/Programming_language/cWTYbgWa">programming language</a>, stylesheets can include highly complex dynamic calculations and conditional processing. (In practice, however, this can be achieved using <a href="/facts/JavaScript/XhhIIEsl">JavaScript</a> to modify the stylesheets applicable to the document at runtime.)
Because of this JSSS was often used in the creation of <a href="/facts/Dynamic_web_page/psjqGKBx">dynamic web pages</a>.
</p>
<h3>Example</h3>
<p>The following example shows part of the source code of an HTML document:
</p>
<style type="text/javascript">
tags.H1.color = "red";
tags.p.fontSize = "20pt";

with (tags.H3) {
    color = "green";
}
with (tags.H2) {
    color = "red";
    fontSize = "16pt";
    marginTop = "4cm";
}
</style>

<p>Similar to <a href="/facts/Cascading_Style_Sheets/tA90XBQo">Cascading Style Sheets</a>, JSSS could be used in a <style> tag. This example shows two different methods to select tags.
</p>
<h2 id="browser-support">Browser support</h2>
<p>Javascript Style Sheets were only supported by Netscape 4.x (4.0–4.8) but no later versions. No other <a href="/facts/Web_browser/2pfyymLs">web browser</a> has ever implemented JSSS.
</p>

<h2 id="external-links">External links</h2>
<ul><li><a href="http://www.w3.org/Submission/1996/1/WD-jsss-960822">Netscape's JavaScript-Based Style Sheets submission to the W3C</a></li>
<li><a href="http://sunsite.uakom.sk/sunworldonline/swol-04-1997/swol-04-webmaster.html">The dynamic, powerful abilities of JavaScript Style Sheets</a></li>
<li><a href="https://web.archive.org/web/20200401000000*/http://www.damsbo.com/webdev/jsss/jss25.htm">JavaScript Style Sheet Reference</a></li></ul>

<h2 id="references">References</h2>

<ol>
<li id="fn:1"><p>Håkon Wium Lie; Bert Bos. "Chapter 20 - The CSS saga". World Wide Web Consortium. Retrieved 23 June 2010. <a href="/wiki/H%C3%A5kon_Wium_Lie" target="_blank">/wiki/H%C3%A5kon_Wium_Lie</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></p></li>
<li id="fn:2"><p>Håkon Wium Lie; Bert Bos. "Chapter 20 - The CSS saga". World Wide Web Consortium. Retrieved 23 June 2010. <a href="/wiki/H%C3%A5kon_Wium_Lie" target="_blank">/wiki/H%C3%A5kon_Wium_Lie</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></p></li>
</ol>

JavaScript Style Sheets open-in-new

JavaScript Style Sheets