View source for Adding JavaScript and CSS to the page

== Inserting from a File == <!--T:3-->
</translate>

<translate>
<!--T:53-->
Joomla allows you to add JavaScript and CSS files to your HTML document, and it puts the associated ''<script>'' and ''<link>'' elements within the HTML ''<head>'' section. To do this you call the ''addScript'' and ''addStyleSheet'' methods of the Joomla object which represents the HTML document. Since Joomla! buffers all the HTML-related data that makes up a page before output, it is possible to call these methods anywhere within your code. </translate>

<translate><!--T:7-->
First, get a reference to the current document object:</translate>

<syntaxhighlight lang="php">
use Joomla\CMS\Factory;
$document = Factory::getDocument();
// above 2 lines are equivalent to the older form: $document = JFactory::getDocument();
</syntaxhighlight>

<translate><!--T:8-->
Then for a style sheet, use this code:</translate>

<syntaxhighlight lang="php">
$document->addStyleSheet($url);
</syntaxhighlight>

<translate><!--T:9-->
To add a JavaScript file, use this code:</translate>

<syntaxhighlight lang="php">
$document->addScript($url);
</syntaxhighlight>

<translate><!--T:10-->
where ''$url'' is the variable containing the full path to the JavaScript or CSS file. For example:</translate>
''JUri::base() . 'templates/custom/js/sample.js'''

<translate><!--T:11-->
Note this will '''not''' include Mootools or jQuery. If your script requires Mootools or jQuery see [[S:MyLanguage/Javascript_Frameworks|JavaScript Frameworks]] for full details on how to include them. (Note that jQuery can only be included natively on Joomla! 3.0+.)</translate>
<translate><!--T:6-->
It used to be possible to do this with JHTML, however, this was deprecated in Joomla 2.5 and removed in Joomla 3.x.
</translate>

<translate>
=== $options and $attributes Parameters === <!--T:54--></translate>
<translate>
<!--T:55-->
You can add ''$options'' and ''$attributes'' parameters to the above methods. The ''$options'' control overall how the ''<script>'' and ''<link>'' elements are output while the ''$attributes'' get set as HTML attributes within those tags. (Note that although there are Deprecated markers against the addScript and addStyleSheet methods of the [https://api.joomla.org/cms-3/classes/Joomla.CMS.Document.Document.html#method_addScript Joomla Document API], these markers refer just to the signature of these methods; the form of the signature using ''$options'' and ''$attributes'' parameters is not deprecated).</translate>
<translate>
<!--T:56-->
The ''$options'' parameter should be an array and 2 different options are currently supported:</translate>
<translate>
<!--T:57-->
* ''version => auto'' If this is set then a 'media version' is appended as a query parameter to the CSS or JavaScript URL within the ''<script>'' or ''<link>'' element. This is a string (an md5 hash) that is generated from factors including the Joomla version, your Joomla instance ''secret'' and the date/time at which the media version was generated. The media version is regenerated whenever anything is installed on the Joomla instance. Its purpose is to force browsers to reload the CSS and JavaScript files instead of using possibly outdated versions from cache.</translate>
<translate>
<!--T:58-->
For example</translate>
<syntaxhighlight lang="php">
$document->addStyleSheet("...demo.css", array('version'=>'auto'));
// leads to something like
// <link href="...demo.css?37e343bbb4073e0dfe5b1eb40b6" rel="stylesheet">
</syntaxhighlight>
<translate>
<!--T:59-->
The string of characters after the ''?'' is the md5 hash, which will change when extensions or Joomla itself are installed/upgraded/uninstalled. </translate>
<translate>
<!--T:60-->
* '''conditional' => 'lt IE 9''' (as an example). This outputs the ''<script>'' or ''<link>'' within a [https://en.wikipedia.org/wiki/Conditional_comment Conditional Comment] which earlier versions of Internet Explorer interpreted.</translate>
<translate>
<!--T:61-->
For example</translate>
<syntaxhighlight lang="php">
$document->addScript("...demo.js", array('conditional'=>'lt IE 9'));
// leads to
// <!--[if lt IE 9]><script src="...demo.js"></script><![endif]-->
</syntaxhighlight>
<translate>
<!--T:62-->
The ''$attributes'' parameter should also be an array, and these are mapped to be HTML attributes of the ''<script>'' or ''<link>'' element. For example,</translate>

<syntaxhighlight lang="php">
$document->addScript("...demo.js", array(), array('async'=>'async'));
// leads to
// <script src="...demo.js" async></script>
</syntaxhighlight>
<translate>