PageRenderTime 48ms CodeModel.GetById 18ms RepoModel.GetById 1ms app.codeStats 0ms

/docs/dom/dom-style.html

https://bitbucket.org/cng1985/kissy
HTML | 170 lines | 157 code | 13 blank | 0 comment | 0 complexity | 7d653e7037f2384bbceda955c9182c7d MD5 | raw file
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8"/>
    5. 

  5. <title>dom-style &lsaquo; KISSY Docs</title>
    6. 

  6. <link rel="stylesheet" href="../assets/base-min.css" />
    7. 

  7. <link rel="stylesheet" href="../assets/docs.css" />
    8. 

  8. </head>
    9. 

  9. <body class="w866">
    10. 

  10. <div id="header">
    11. 

  11.     <a class="logo" href="../index.html"><img src="../assets/logo.png" alt="KISSY" width="138" height="74" /></a>
    12. 

  12.     <p class="rel-nav">
    13. 

  13.         <a href="http://github.com/kissyteam/kissy/blob/master/src/dom/dom-style.js"><code>dom-style.js</code></a>
    14. 

  14.     </p>
    15. 

  15. </div>
    16. 

  16. <div id="content" class="layout grid-s232m0">
    17. 

  17.     <div class="col-main">
    18. 

  18.         <div class="main-wrap">
    19. 

  19. 

  20.             <div class="section">
    21. 

  21.                 <h3 id="methods">Methods</h3>
    22. 

  22. 

  23.                 <div class="member method">
    24. 

  24.                     <h4>
    25. 

  25.                         <a name="method_css">css</a>
    26. 

  26.                         <code>String <em>css</em> ( selector, name )</code>
    27. 

  27.                     </h4>
    28. 

  28.                     <div class="detail">
    29. 

  29.                         <p>获取符合选择器的第一个元素的样式值。</p>
    30. 

  30.                     </div>
    31. 

  31.                     <h4>
    32. 

  32.                         <code>void <em>css</em> ( selector, name, value )</code>
    33. 

  33.                     </h4>
    34. 

  34.                     <div class="detail">
    35. 

  35.                         <p>给符合选择器的所有元素设置样式值。</p>
    36. 

  36.                     </div>
    37. 

  37.                 </div>
    38. 

  38. 

  39.                 <div class="member method">
    40. 

  40.                     <h4>
    41. 

  41.                         <a name="method_width">width</a>
    42. 

  42.                         <code>Number <em>width</em> ( selector )</code>
    43. 

  43.                     </h4>
    44. 

  44.                     <div class="detail">
    45. 

  45.                         <p>获取符合选择器的第一个元素的宽度值。</p>
    46. 

  46.                         <p class="notice">该方法始终返回像素值。看例子：</p>
    47. 

  47. <pre class="example-code"><code>
    48. 

  48. &lt;div style="width: 100px;"&gt;
    49. 

  49.     &lt;div id="test" style="width: 80%; height: 20px"&gt;&lt;/div&gt;
    50. 

  50. &lt;/div&gt;
    51. 

  51. &lt;script&gt;
    52. 

  52.     var S = KISSY, DOM = S.DOM,
    53. 

  53.     elem = S.get('#test');
    54. 

  54. 

  55.     DOM.css(elem, 'width'); // 返回 80%
    56. 

  56.     DOM.css(elem, 'height'); // 返回 20px
    57. 

  57. 

  58.     DOM.width(elem); // 返回 80
    59. 

  59.     DOM.height(elem); // 返回 20
    60. 

  60. &lt;/script&gt;
    61. 

  61. </code></pre>
    62. 

  62.                     </div>
    63. 

  63.                     <h4>
    64. 

  64.                         <code>void <em>width</em> ( selector, value )</code>
    65. 

  65.                     </h4>
    66. 

  66.                     <div class="detail">
    67. 

  67.                         <p>给符合选择器的所有元素设置宽度值。等价为 <code>DOM.css(selector, 'width', value)</code></p>
    68. 

  68.                     </div>
    69. 

  69.                 </div>
    70. 

  70. 

  71.                 <div class="member method">
    72. 

  72.                     <h4>
    73. 

  73.                         <a name="method_height">height</a>
    74. 

  74.                         <code>Number <em>height</em> ( selector )</code>
    75. 

  75.                     </h4>
    76. 

  76.                     <div class="detail">
    77. 

  77.                         <p>获取符合选择器的第一个元素的高度值。</p>
    78. 

  78.                     </div>
    79. 

  79.                     <h4>
    80. 

  80.                         <code>void <em>height</em> ( selector, value )</code>
    81. 

  81.                     </h4>
    82. 

  82.                     <div class="detail">
    83. 

  83.                         <p>给符合选择器的所有元素设置高度值。</p>
    84. 

  84.                     </div>
    85. 

  85.                 </div>
    86. 

  86. 

  87.                 <div class="member method">
    88. 

  88.                     <h4>
    89. 

  89.                         <a name="method_addStyleSheet">addStyleSheet</a>
    90. 

  90.                         <code>void <em>addStyleSheet</em> ( cssText, id )</code>
    91. 

  91.                     </h4>
    92. 

  92.                     <div class="detail">
    93. 

  93.                         <p>将 cssText 字符串作为样式添加到文档中。</p>
    94. 

  94.                     </div>
    95. 

  95.                 </div>
    96. 

  96. 

  97.                 <div class="member method">
    98. 

  98.                     <h4>
    99. 

  99.                         <a name="method_show">show</a>
    100. 

  100.                         <code>void <em>show</em> ( selector )</code>
    101. 

  101.                     </h4>
    102. 

  102.                     <div class="detail">
    103. 

  103.                         <p>显示符合选择器的所有元素。</p>
    104. 

  104.                     </div>
    105. 

  105.                 </div>
    106. 

  106. 

  107.                 <div class="member method">
    108. 

  108.                     <h4>
    109. 

  109.                         <a name="method_hide">hide</a>
    110. 

  110.                         <code>void <em>hide</em> ( selector )</code>
    111. 

  111.                     </h4>
    112. 

  112.                     <div class="detail">
    113. 

  113.                         <p>隐藏符合选择器的所有元素。</p>
    114. 

  114.                     </div>
    115. 

  115.                 </div>
    116. 

  116. 

  117.                 <div class="member method">
    118. 

  118.                     <h4>
    119. 

  119.                         <a name="method_toggle">toggle</a>
    120. 

  120.                         <code>void <em>toggle</em> ( selector )</code>
    121. 

  121.                     </h4>
    122. 

  122.                     <div class="detail">
    123. 

  123.                         <p>将符合选择器的所有元素切换显示/隐藏两个状态。</p>
    124. 

  124.                     </div>
    125. 

  125.                 </div>
    126. 

  126.             </div>
    127. 

  127. 

  128.             <div class="section">
    129. 

  129.                 <h3>Examples</h3>
    130. 

  130.                 <p>测试页面：<a href="http://kissyteam.github.com/kissy/src/dom/test-dom-style.html"><code>test-dom-style.html</code></a></p>
    131. 

  131. 

  132.                 <div class="section notes">
    133. 

  133.                     <p>dom-style 提供的所有方法：</p>
    134. 

  134.                     <ol>
    135. 

  135.                         <li>参数 selector 可以为数组：<code>DOM.css([elem1, elem2], 'display', 'none');</code></li>
    136. 

  136.                         <li>参数 name 可以为 map 对象：<code>DOM.css('.widget', {position: 'absolute', top: '10px', left: '10px'});</code></li>
    137. 

  137.                         <li>setter 和 getter 都遵循 get first, set all 原则：如果是获取，仅获取符合选择器的第一个元素的值；如果是设置，则操作符合选择器的所有元素。</li>
    138. 

  138.                     </ol>
    139. 

  139.                 </div>
    140. 

  140.             </div>
    141. 

  141. 

  142.         </div>
    143. 

  143.     </div>
    144. 

  144.     <div class="col-sub">
    145. 

  145.         <div class="sub-wrap">
    146. 

  146.             <div class="loc">
    147. 

  147.                 <a href="../index.html">home</a> &rsaquo;
    148. 

  148.                 <a href="index.html">dom</a> &rsaquo;
    149. 

  149.                 dom-style :
    150. 

  150.             </div>
    151. 

  151.             <div class="toc">
    152. 

  152.                 <h3>Methods</h3>
    153. 

  153.                 <ul>
    154. 

  154.                     <li><a href="#method_css">css</a></li>
    155. 

  155.                     <li><a href="#method_width">width</a></li>
    156. 

  156.                     <li><a href="#method_height">height</a></li>
    157. 

  157.                     <li><a href="#method_addStyleSheet">addStyleSheet</a></li>
    158. 

  158.                     <li><a href="#method_show">show</a></li>
    159. 

  159.                     <li><a href="#method_hide">hide</a></li>
    160. 

  160.                     <li><a href="#method_toggle">toggle</a></li>
    161. 

  161.                 </ul>
    162. 

  162.             </div>
    163. 

  163.         </div>
    164. 

  164.     </div>
    165. 

  165. </div>
    166. 

  166. <div id="footer">
    167. 

  167.     <p class="copyright">&copy; 2009 - 2029 KISSY UI LIBRARY</p>
    168. 

  168. </div>
    169. 

  169. </body>
    170. 

  170. </html>
    171.