Files
Phraseanet/www/include/jslibs/yui2.8/docs/YAHOO.util.StyleSheet.html
2011-02-16 16:09:48 +01:00

812 lines
46 KiB
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns:yui="http://yuilibrary.com/rdf/1.0/yui.rdf#">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>API: stylesheet YAHOO.util.StyleSheet (YUI Library)</title>
<link rel="stylesheet" type="text/css" href="assets/reset-fonts-grids-min.css" />
<link rel="stylesheet" type="text/css" href="assets/api.css" />
<script type="text/javascript" src="assets/api-js"></script>
<script type="text/javascript" src="assets/ac-js"></script>
</head>
<body id="yahoo-com">
<div id="doc3" class="yui-t2">
<div id="hd">
<h1><a href="http://developer.yahoo.com/yui/" title="Yahoo! UI Library">Yahoo! UI Library</a></h1>
<h3>stylesheet&nbsp; <span class="subtitle">2.8.2r1</span></h3>
<a href="./index.html" title="Yahoo! UI Library">Yahoo! UI Library</a>
&gt; <a href="./module_stylesheet.html" title="stylesheet">stylesheet</a>
&gt; YAHOO.util.StyleSheet
<form onsubmit="return false">
<div id="propertysearch">
Search: <input autocomplete="off" id="searchinput" />
<div id="searchresults">
&nbsp;
</div>
</div>
</form>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<form action="#" name="yui-classopts-form" method="get" id="yui-classopts-form">
<fieldset>
<legend>Filters</legend>
<span class="classopts"><input type="checkbox" name="show_private" id="show_private" /> <label for="show_private">Show Private</label></span>
<span class="classopts"><input type="checkbox" name="show_protected" id="show_protected" /> <label for="show_protected">Show Protected</label></span>
<span class="classopts"><input type="checkbox" name="show_deprecated" id="show_deprecated" /> <label for="show_deprecated">Show Deprecated</label></span>
</fieldset>
</form>
<h2>
Class <b property="yui:name">YAHOO.util.StyleSheet</b>
<span class="extends">
</span>
</h2>
<!-- class tree goes here -->
<div class="summary description" property="yui:description">
Create an instance of YAHOO.util.StyleSheet to encapsulate a css stylesheet.
The constructor can be called using function or constructor syntax.
<pre><code>var sheet = YAHOO.util.StyleSheet(..);</pre></code>
or
<pre><code>var sheet = new YAHOO.util.StyleSheet(..);</pre></code>
The first parameter passed can be any of the following things:
<ul>
<li>The desired string name to register a new empty sheet</li>
<li>The string name of an existing YAHOO.util.StyleSheet instance</li>
<li>The unique yuiSSID generated for an existing YAHOO.util.StyleSheet instance</li>
<li>The id of an existing <code>&lt;link&gt;</code> or <code>&lt;style&gt;</code> node</li>
<li>The node reference for an existing <code>&lt;link&gt;</code> or <code>&lt;style&gt;</code> node</li>
<li>A chunk of css text to create a new stylesheet from</li>
</ul>
<p>If a string is passed, StyleSheet will first look in its static name
registry for an existing sheet, then in the DOM for an element with that id.
If neither are found and the string contains the { character, it will be
used as a the initial cssText for a new StyleSheet. Otherwise, a new empty
StyleSheet is created, assigned the string value as a name, and registered
statically by that name.</p>
<p>The optional second parameter is a string name to register the sheet as.
This param is largely useful when providing a node id/ref or chunk of css
text to create a populated instance.</p>
</div>
<div class="section constructor details" rel="yui:constructor" resource="#constructor">
<h3 id="constructor">Constructor</h3>
<div class="content">
<div class="detail">
<strong property="yui:name">YAHOO.util.StyleSheet</strong>
<code>
(
seed
,
name
)
</code>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">seed</span>
&lt;<span property="yui:type">String|HTMLElement</span>&gt;
</code>
<span property="yui:description"> a style or link node, its id, or a name or
yuiSSID of a StyleSheet, or a string of css text (see above)</span>
</dd>
<dd rel="yui:parameter">
<code><span property="yui:name">name</span>
&lt;<span property="yui:type">String</span>&gt;
</code>
<span property="yui:description"> OPTIONAL name to register instance for future static
access</span>
</dd>
</dl>
</div>
</div>
</div>
</div>
<div rel="yui:properties" resource="#properties">
<div class="section field details">
<h3 id="properties">Properties</h3>
<div class="content">
<div class="" rel="yui:property" resource="#property_node">
<h4><a name="property_node" property="yui:name">node</a>
- <code><span property="yui:type">HTMLElement</span></code>
</h4>
<div class="detail">
<div class="description" property="yui:description">
The HTMLElement that this instance encapsulates
</div>
</div>
<hr />
</div>
</div>
</div>
</div>
<div rel="yui:methods" resource="#methods">
<div class="section method details">
<h3 id="methods">Methods</h3>
<div class="content">
<div class="" rel="yui:method" resource="#method_disable">
<h4>
<a name="method_disable">disable</a></h4>
<div class="detail" >
<code>
StyleSheet
<strong property="yui:name">disable</strong>
(
)
</code>
<div class="description" property="yui:description">
Disable all the rules in the sheet. Rules may be changed while the
StyleSheet is disabled.
</div>
<div class="description">
<dl>
<dt>Returns:
<code property="yui:return">
StyleSheet
</code></dt>
<dd property="yui:returnInfo">the instance</dd>
</dl>
<div class="chainable">
<strong>Chainable:</strong> This method is chainable.
</div>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:method" resource="#method_enable">
<h4>
<a name="method_enable">enable</a></h4>
<div class="detail" >
<code>
StyleSheet
<strong property="yui:name">enable</strong>
(
)
</code>
<div class="description" property="yui:description">
Enable all the rules in the sheet
</div>
<div class="description">
<dl>
<dt>Returns:
<code property="yui:return">
StyleSheet
</code></dt>
<dd property="yui:returnInfo">the instance</dd>
</dl>
<div class="chainable">
<strong>Chainable:</strong> This method is chainable.
</div>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:method" resource="#method_getCssText">
<h4>
<a name="method_getCssText">getCssText</a></h4>
<div class="detail" >
<code>
String
<strong property="yui:name">getCssText</strong>
(
sel
)
</code>
<div class="description" property="yui:description">
Get the current cssText for a rule or the entire sheet. If the
selector param is supplied, only the cssText for that rule will be
returned, if found. If the selector string targets multiple
selectors separated by commas, the cssText of the first rule only
will be returned. If no selector string, the stylesheet's full
cssText will be returned.
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">sel</span>
&lt;<span property="yui:type">String</span>&gt;
</code>
<span property="yui:description"> Selector string</span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:method" resource="#method_getId">
<h4>
<a name="method_getId">getId</a></h4>
<div class="detail" >
<code>
Number
<strong property="yui:name">getId</strong>
(
)
</code>
<div class="description" property="yui:description">
Get the unique yuiSSID for this StyleSheet instance
</div>
<div class="description">
<dl>
<dt>Returns:
<code property="yui:return">
Number
</code></dt>
<dd property="yui:returnInfo">the static id</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:method" resource="#method_isEnabled">
<h4>
<a name="method_isEnabled">isEnabled</a></h4>
<div class="detail" >
<code>
Boolean
<strong property="yui:name">isEnabled</strong>
(
)
</code>
<div class="description" property="yui:description">
Returns boolean indicating whether the StyleSheet is enabled
</div>
<div class="description">
<dl>
<dt>Returns:
<code property="yui:return">
Boolean
</code></dt>
<dd property="yui:returnInfo">is it enabled?</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:method" resource="#method_set">
<h4>
<a name="method_set">set</a></h4>
<div class="detail" >
<code>
StyleSheet
<strong property="yui:name">set</strong>
(
sel
,
css
)
</code>
<div class="description" property="yui:description">
<p>Set style properties for a provided selector string.
If the selector includes commas, it will be split into individual
selectors and applied accordingly. If the selector string does not
have a corresponding rule in the sheet, it will be added.</p>
<p>The second parameter can be either a string of CSS text,
formatted as CSS ("font-size: 10px;"), or an object collection of
properties and their new values. Object properties must be in
JavaScript format ({ fontSize: "10px" }).</p>
<p>The float style property will be set by any of &quot;float&quot;,
&quot;styleFloat&quot;, or &quot;cssFloat&quot; if passed in the
object map. Use "float: left;" format when passing a CSS text
string.</p>
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">sel</span>
&lt;<span property="yui:type">String</span>&gt;
</code>
<span property="yui:description"> the selector string to apply the changes to</span>
</dd>
<dd rel="yui:parameter">
<code><span property="yui:name">css</span>
&lt;<span property="yui:type">Object|String</span>&gt;
</code>
<span property="yui:description"> Object literal of style properties and
new values, or a string of cssText</span>
</dd>
</dl>
<dl>
<dt>Returns:
<code property="yui:return">
StyleSheet
</code></dt>
<dd property="yui:returnInfo">the StyleSheet instance</dd>
</dl>
<div class="chainable">
<strong>Chainable:</strong> This method is chainable.
</div>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:method" resource="#method_StyleSheet.isValidSelector">
<h4>
<a name="method_StyleSheet.isValidSelector">StyleSheet.isValidSelector</a></h4>
<div class="detail" >
<code>
static
Boolean
<strong property="yui:name">StyleSheet.isValidSelector</strong>
(
sel
)
</code>
<div class="description" property="yui:description">
<p>Determines if a selector string is safe to use. Used internally
in set to prevent IE from locking up when attempting to add a rule for a
&quot;bad selector&quot;.</p>
<p>Bad selectors are considered to be any string containing unescaped
`~!@$%^&()+=|{}[];'"?< or space. Also forbidden are . or # followed by
anything other than an alphanumeric. Additionally -abc or .-abc or
#_abc or '# ' all fail. There are likely more failure cases, so
please file a bug if you encounter one.</p>
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">sel</span>
&lt;<span property="yui:type">String</span>&gt;
</code>
<span property="yui:description"> the selector string</span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:method" resource="#method_StyleSheet.register">
<h4>
<a name="method_StyleSheet.register">StyleSheet.register</a></h4>
<div class="detail" >
<code>
static
Boolean
<strong property="yui:name">StyleSheet.register</strong>
(
name
,
sheet
)
</code>
<div class="description" property="yui:description">
Registers a StyleSheet instance in the static registry by the given name
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">name</span>
&lt;<span property="yui:type">String</span>&gt;
</code>
<span property="yui:description"> the name to assign the StyleSheet in the registry</span>
</dd>
<dd rel="yui:parameter">
<code><span property="yui:name">sheet</span>
&lt;<span property="yui:type">StyleSheet</span>&gt;
</code>
<span property="yui:description"> The StyleSheet instance</span>
</dd>
</dl>
<dl>
<dt>Returns:
<code property="yui:return">
Boolean
</code></dt>
<dd property="yui:returnInfo">false if no name or sheet is not a StyleSheet
instance. true otherwise.</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:method" resource="#method_StyleSheet.toCssText">
<h4>
<a name="method_StyleSheet.toCssText">StyleSheet.toCssText</a></h4>
<div class="detail" >
<code>
static
String
<strong property="yui:name">StyleSheet.toCssText</strong>
(
css
,
cssText
)
</code>
<div class="description" property="yui:description">
<p>Converts an object literal of style properties and values into a string
of css text. This can then be assigned to el.style.cssText.</p>
<p>The optional second parameter is a cssText string representing the
starting state of the style prior to alterations. This is most often
extracted from the eventual target's current el.style.cssText.</p>
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">css</span>
&lt;<span property="yui:type">Object</span>&gt;
</code>
<span property="yui:description"> object literal of style properties and values</span>
</dd>
<dd rel="yui:parameter">
<code><span property="yui:name">cssText</span>
&lt;<span property="yui:type">String</span>&gt;
</code>
<span property="yui:description"> OPTIONAL starting cssText value</span>
</dd>
</dl>
<dl>
<dt>Returns:
<code property="yui:return">
String
</code></dt>
<dd property="yui:returnInfo">the resulting cssText string</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:method" resource="#method_unset">
<h4>
<a name="method_unset">unset</a></h4>
<div class="detail" >
<code>
StyleSheet
<strong property="yui:name">unset</strong>
(
sel
,
css
)
</code>
<div class="description" property="yui:description">
<p>Unset style properties for a provided selector string, removing
their effect from the style cascade.</p>
<p>If the selector includes commas, it will be split into individual
selectors and applied accordingly. If there are no properties
remaining in the rule after unsetting, the rule is removed.</p>
<p>The style property or properties in the second parameter must be the
<p>JavaScript style property names. E.g. fontSize rather than font-size.</p>
<p>The float style property will be unset by any of &quot;float&quot;,
&quot;styleFloat&quot;, or &quot;cssFloat&quot;.</p>
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">sel</span>
&lt;<span property="yui:type">String</span>&gt;
</code>
<span property="yui:description"> the selector string to apply the changes to</span>
</dd>
<dd rel="yui:parameter">
<code><span property="yui:name">css</span>
&lt;<span property="yui:type">String|Array</span>&gt;
</code>
<span property="yui:description"> style property name or Array of names</span>
</dd>
</dl>
<dl>
<dt>Returns:
<code property="yui:return">
StyleSheet
</code></dt>
<dd property="yui:returnInfo">the StyleSheet instance</dd>
</dl>
<div class="chainable">
<strong>Chainable:</strong> This method is chainable.
</div>
</div>
</div>
<hr />
</div>
</div>
</div>
</div>
<div rel="yui:events" resource="#events">
</div>
<div rel="yui:attributes" resource="#configattributes">
</div>
</div>
</div>
<div class="yui-b">
<div class="nav">
<div id="moduleList" class="module">
<h4>Modules</h4>
<ul class="content">
<li class=""><a href="module_animation.html" title="animation">animation</a></li>
<li class=""><a href="module_autocomplete.html" title="autocomplete">autocomplete</a></li>
<li class=""><a href="module_button.html" title="button">button</a></li>
<li class=""><a href="module_calendar.html" title="calendar">calendar</a></li>
<li class=""><a href="module_carousel.html" title="carousel">carousel</a></li>
<li class=""><a href="module_charts.html" title="charts">charts</a></li>
<li class=""><a href="module_colorpicker.html" title="colorpicker">colorpicker</a></li>
<li class=""><a href="module_connection.html" title="connection">connection</a></li>
<li class=""><a href="module_container.html" title="container">container</a></li>
<li class=""><a href="module_cookie.html" title="cookie">cookie</a></li>
<li class=""><a href="module_datasource.html" title="datasource">datasource</a></li>
<li class=""><a href="module_datatable.html" title="datatable">datatable</a></li>
<li class=""><a href="module_datemath.html" title="datemath">datemath</a></li>
<li class=""><a href="module_dom.html" title="dom">dom</a></li>
<li class=""><a href="module_dragdrop.html" title="dragdrop">dragdrop</a></li>
<li class=""><a href="module_editor.html" title="editor">editor</a></li>
<li class=""><a href="module_element.html" title="element">element</a></li>
<li class=""><a href="module_element-delegate.html" title="element-delegate">element-delegate</a></li>
<li class=""><a href="module_event.html" title="event">event</a></li>
<li class=""><a href="module_event-delegate.html" title="event-delegate">event-delegate</a></li>
<li class=""><a href="module_event-mouseenter.html" title="event-mouseenter">event-mouseenter</a></li>
<li class=""><a href="module_event-simulate.html" title="event-simulate">event-simulate</a></li>
<li class=""><a href="module_get.html" title="get">get</a></li>
<li class=""><a href="module_history.html" title="history">history</a></li>
<li class=""><a href="module_imagecropper.html" title="imagecropper">imagecropper</a></li>
<li class=""><a href="module_imageloader.html" title="imageloader">imageloader</a></li>
<li class=""><a href="module_json.html" title="json">json</a></li>
<li class=""><a href="module_layout.html" title="layout">layout</a></li>
<li class=""><a href="module_logger.html" title="logger">logger</a></li>
<li class=""><a href="module_menu.html" title="menu">menu</a></li>
<li class=""><a href="module_paginator.html" title="paginator">paginator</a></li>
<li class=""><a href="module_profiler.html" title="profiler">profiler</a></li>
<li class=""><a href="module_profilerviewer.html" title="profilerviewer">profilerviewer</a></li>
<li class=""><a href="module_progressbar.html" title="progressbar">progressbar</a></li>
<li class=""><a href="module_resize.html" title="resize">resize</a></li>
<li class=""><a href="module_selector.html" title="selector">selector</a></li>
<li class=""><a href="module_slider.html" title="slider">slider</a></li>
<li class=""><a href="module_storage.html" title="Storage">Storage</a></li>
<li class="selected"><a href="module_stylesheet.html" title="stylesheet">stylesheet</a></li>
<li class=""><a href="module_swf.html" title="swf">swf</a></li>
<li class=""><a href="module_swfdetect.html" title="swfdetect">swfdetect</a></li>
<li class=""><a href="module_swfstore.html" title="swfstore">swfstore</a></li>
<li class=""><a href="module_tabview.html" title="tabview">tabview</a></li>
<li class=""><a href="module_treeview.html" title="treeview">treeview</a></li>
<li class=""><a href="module_uploader.html" title="uploader">uploader</a></li>
<li class=""><a href="module_yahoo.html" title="yahoo">yahoo</a></li>
<li class=""><a href="module_yuiloader.html" title="yuiloader">yuiloader</a></li>
<li class=""><a href="module_yuitest.html" title="yuitest">yuitest</a></li>
</ul>
</div>
<div id="classList" class="module">
<h4>Classes</h4>
<ul class="content">
<li class="selected"><a href="YAHOO.util.StyleSheet.html" title="YAHOO.util.StyleSheet">YAHOO.util.StyleSheet</a></li>
</ul>
</div>
<div id="fileList" class="module">
<h4>Files</h4>
<ul class="content">
<li class=""><a href="stylesheet.js.html" title="stylesheet.js">stylesheet.js</a></li>
</ul>
</div>
<div id="propertyList" class="module">
<h4>Properties</h4>
<ul class="content">
<li class=""><a href="#property_node" title="node">node</a></li>
</ul>
</div>
<div id="methodsList" class="module">
<h4>Methods</h4>
<ul class="content">
<li class=""><a href="#method_disable" title="disable">disable</a></li>
<li class=""><a href="#method_enable" title="enable">enable</a></li>
<li class=""><a href="#method_getCssText" title="getCssText">getCssText</a></li>
<li class=""><a href="#method_getId" title="getId">getId</a></li>
<li class=""><a href="#method_isEnabled" title="isEnabled">isEnabled</a></li>
<li class=""><a href="#method_set" title="set">set</a></li>
<li class=""><a href="#method_StyleSheet.isValidSelector" title="StyleSheet.isValidSelector">StyleSheet.isValidSelector</a></li>
<li class=""><a href="#method_StyleSheet.register" title="StyleSheet.register">StyleSheet.register</a></li>
<li class=""><a href="#method_StyleSheet.toCssText" title="StyleSheet.toCssText">StyleSheet.toCssText</a></li>
<li class=""><a href="#method_unset" title="unset">unset</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="ft">
<hr />
Copyright &copy; 2010 Yahoo! Inc. All rights reserved.
</div>
</div>
<script type="text/javascript">
var ALL_YUI_PROPS = [{"access": "", "host": "YAHOO.util.StyleSheet", "name": "disable", "url": "YAHOO.util.StyleSheet.html#method_disable", "type": "method"}, {"access": "", "host": "YAHOO.util.StyleSheet", "name": "enable", "url": "YAHOO.util.StyleSheet.html#method_enable", "type": "method"}, {"access": "", "host": "YAHOO.util.StyleSheet", "name": "getCssText", "url": "YAHOO.util.StyleSheet.html#method_getCssText", "type": "method"}, {"access": "", "host": "YAHOO.util.StyleSheet", "name": "getId", "url": "YAHOO.util.StyleSheet.html#method_getId", "type": "method"}, {"access": "", "host": "YAHOO.util.StyleSheet", "name": "isEnabled", "url": "YAHOO.util.StyleSheet.html#method_isEnabled", "type": "method"}, {"access": "", "host": "YAHOO.util.StyleSheet", "name": "node", "url": "YAHOO.util.StyleSheet.html#property_node", "type": "property"}, {"access": "", "host": "YAHOO.util.StyleSheet", "name": "set", "url": "YAHOO.util.StyleSheet.html#method_set", "type": "method"}, {"access": "", "host": "YAHOO.util.StyleSheet", "name": "StyleSheet.isValidSelector", "url": "YAHOO.util.StyleSheet.html#method_StyleSheet.isValidSelector", "type": "method"}, {"access": "", "host": "YAHOO.util.StyleSheet", "name": "StyleSheet.register", "url": "YAHOO.util.StyleSheet.html#method_StyleSheet.register", "type": "method"}, {"access": "", "host": "YAHOO.util.StyleSheet", "name": "StyleSheet.toCssText", "url": "YAHOO.util.StyleSheet.html#method_StyleSheet.toCssText", "type": "method"}, {"access": "", "host": "YAHOO.util.StyleSheet", "name": "unset", "url": "YAHOO.util.StyleSheet.html#method_unset", "type": "method"}];
</script>
</body>
</html>