/docs/dom/dom-style.html
HTML | 170 lines | 157 code | 13 blank | 0 comment | 0 complexity | 7d653e7037f2384bbceda955c9182c7d MD5 | raw file
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>dom-style ‹ KISSY Docs</title>
- <link rel="stylesheet" href="../assets/base-min.css" />
- <link rel="stylesheet" href="../assets/docs.css" />
- </head>
- <body class="w866">
- <div id="header">
- <a class="logo" href="../index.html"><img src="../assets/logo.png" alt="KISSY" width="138" height="74" /></a>
- <p class="rel-nav">
- <a href="http://github.com/kissyteam/kissy/blob/master/src/dom/dom-style.js"><code>dom-style.js</code></a>
- </p>
- </div>
- <div id="content" class="layout grid-s232m0">
- <div class="col-main">
- <div class="main-wrap">
- <div class="section">
- <h3 id="methods">Methods</h3>
- <div class="member method">
- <h4>
- <a name="method_css">css</a>
- <code>String <em>css</em> ( selector, name )</code>
- </h4>
- <div class="detail">
- <p>获取符合选择器的第一个元素的样式值。</p>
- </div>
- <h4>
- <code>void <em>css</em> ( selector, name, value )</code>
- </h4>
- <div class="detail">
- <p>给符合选择器的所有元素设置样式值。</p>
- </div>
- </div>
- <div class="member method">
- <h4>
- <a name="method_width">width</a>
- <code>Number <em>width</em> ( selector )</code>
- </h4>
- <div class="detail">
- <p>获取符合选择器的第一个元素的宽度值。</p>
- <p class="notice">该方法始终返回像素值。看例子:</p>
- <pre class="example-code"><code>
- <div style="width: 100px;">
- <div id="test" style="width: 80%; height: 20px"></div>
- </div>
- <script>
- var S = KISSY, DOM = S.DOM,
- elem = S.get('#test');
- DOM.css(elem, 'width'); // 返回 80%
- DOM.css(elem, 'height'); // 返回 20px
- DOM.width(elem); // 返回 80
- DOM.height(elem); // 返回 20
- </script>
- </code></pre>
- </div>
- <h4>
- <code>void <em>width</em> ( selector, value )</code>
- </h4>
- <div class="detail">
- <p>给符合选择器的所有元素设置宽度值。等价为 <code>DOM.css(selector, 'width', value)</code></p>
- </div>
- </div>
- <div class="member method">
- <h4>
- <a name="method_height">height</a>
- <code>Number <em>height</em> ( selector )</code>
- </h4>
- <div class="detail">
- <p>获取符合选择器的第一个元素的高度值。</p>
- </div>
- <h4>
- <code>void <em>height</em> ( selector, value )</code>
- </h4>
- <div class="detail">
- <p>给符合选择器的所有元素设置高度值。</p>
- </div>
- </div>
- <div class="member method">
- <h4>
- <a name="method_addStyleSheet">addStyleSheet</a>
- <code>void <em>addStyleSheet</em> ( cssText, id )</code>
- </h4>
- <div class="detail">
- <p>将 cssText 字符串作为样式添加到文档中。</p>
- </div>
- </div>
- <div class="member method">
- <h4>
- <a name="method_show">show</a>
- <code>void <em>show</em> ( selector )</code>
- </h4>
- <div class="detail">
- <p>显示符合选择器的所有元素。</p>
- </div>
- </div>
- <div class="member method">
- <h4>
- <a name="method_hide">hide</a>
- <code>void <em>hide</em> ( selector )</code>
- </h4>
- <div class="detail">
- <p>隐藏符合选择器的所有元素。</p>
- </div>
- </div>
- <div class="member method">
- <h4>
- <a name="method_toggle">toggle</a>
- <code>void <em>toggle</em> ( selector )</code>
- </h4>
- <div class="detail">
- <p>将符合选择器的所有元素切换显示/隐藏两个状态。</p>
- </div>
- </div>
- </div>
- <div class="section">
- <h3>Examples</h3>
- <p>测试页面:<a href="http://kissyteam.github.com/kissy/src/dom/test-dom-style.html"><code>test-dom-style.html</code></a></p>
- <div class="section notes">
- <p>dom-style 提供的所有方法:</p>
- <ol>
- <li>参数 selector 可以为数组:<code>DOM.css([elem1, elem2], 'display', 'none');</code></li>
- <li>参数 name 可以为 map 对象:<code>DOM.css('.widget', {position: 'absolute', top: '10px', left: '10px'});</code></li>
- <li>setter 和 getter 都遵循 get first, set all 原则:如果是获取,仅获取符合选择器的第一个元素的值;如果是设置,则操作符合选择器的所有元素。</li>
- </ol>
- </div>
- </div>
- </div>
- </div>
- <div class="col-sub">
- <div class="sub-wrap">
- <div class="loc">
- <a href="../index.html">home</a> ›
- <a href="index.html">dom</a> ›
- dom-style :
- </div>
- <div class="toc">
- <h3>Methods</h3>
- <ul>
- <li><a href="#method_css">css</a></li>
- <li><a href="#method_width">width</a></li>
- <li><a href="#method_height">height</a></li>
- <li><a href="#method_addStyleSheet">addStyleSheet</a></li>
- <li><a href="#method_show">show</a></li>
- <li><a href="#method_hide">hide</a></li>
- <li><a href="#method_toggle">toggle</a></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <div id="footer">
- <p class="copyright">© 2009 - 2029 KISSY UI LIBRARY</p>
- </div>
- </body>
- </html>