Clever Geek Handbook

DOMReadyのCSS表現（CSS + JSを1つのファイルに）

おそらく、css-expressionsを使用している多くの人が、定期的に表示される中止メッセージの問題に直面しています。 これは、準備が整うまでDOMツリーが変更されたためだと言われています。



私はまた出会い、そしてためらうことなく、expression'ovの小さな「ラッパー」を書くことにしました。これは、スタイルシートにパッケージ化されたDOMの準備を考慮して、よく使用します。

私はあなたの注意を払ってプレゼントします。





使用する


「ライブラリ」は単なるCSSファイルですが、JavaScriptコードが含まれているため、式で呼び出します。



  1. /*@cc_on /*@if (1) @else @*/ . /*@end @*/ <!-- /* JS <!-- */



  2. /*@cc_on /*@if (1) @else @*/ . /*@end @*/ <!-- /* JS <!-- */



  3. /*@cc_on /*@if (1) @else @*/ . /*@end @*/ <!-- /* JS <!-- */



  4. /*@cc_on /*@if (1) @else @*/ . /*@end @*/ <!-- /* JS <!-- */



  5. /*@cc_on /*@if (1) @else @*/ . /*@end @*/ <!-- /* JS <!-- */



  6. /*@cc_on /*@if (1) @else @*/ . /*@end @*/ <!-- /* JS <!-- */





接続


  1. <！-[IE 8の場合]>
  2. <script type = "text / javascript" src = "ie.min.css"> </ script>
  3. <link rel = "stylesheet" type = "text / css" href = "ie.min.css" />
  4. <！[endif]->


使用する


  1. セレクター{
  2. 幅 ：式（式（ 「エミュレートされたアクション」 、 this 、 {
  3. property ： 'キャンセルのプロパティ（通常、式が呼び出されるプロパティと同一）。 指定した場合、プロパティは無効化され、その中の式は繰り返し実行されません。 、
  4. options ： 「アクションに応じたオプション」
  5. } ） ） ;
  6. }


「アクション」は、DOMツリーの準備ができたときに呼び出されます。 式が準備完了後にすぐに実行される場合。



含まれる機能（アクション）





前に


最初の子としてx-expression-pseudo-beforeクラスを持つspan要素を追加します 。

optionsパラメータは、「擬似要素」の内容を設定する文字列です。



後


x-expression-pseudo-afterクラスを最後の子として持つspan要素を追加します 。

optionsパラメータは、「擬似要素」の内容を設定する文字列です。



最初の


親の最初の子である場合、 x-expression-first-childクラスを要素に追加します。 ライブラリによって生成された擬似要素の前後はスキップされます。



borderSpacing


cellSpacing属性を介してborder-spacingプロパティをエミュレートします。

optionsパラメーターは、属性に設定する番号です。



属性


  1. {
  2. name ： '属性名' 、
  3. 値： 「属性値」
  4. }


要素にnameという名前の属性があるかどうか、およびvalueパラメーターが指定されている場合はその値を確認します。

テストに合格すると、 x-expression-attribute 、 x-expression-attribute- name、およびx-expression-attribute- name - valueクラスが設定されます。



幅


要素の最小幅と最大幅を制御します。 データはsv-in min-widthおよびmax-widthから取得されます。 計算には、親要素が使用されます。



どれでも


要素のコンテキストで任意の関数を実行します。

optionsパラメーターは、開始する関数です。



いくつかの例


  1. body {
  2. width ： expression （ expressions （ 'before' 、 this 、 { property ： 'width' 、 options ： 'aaa' } ） ） ;
  3. height ： expression （ expressions （ 'before' 、 this 、 { property ： 'height' 、 options ： 'bbb' } ） ） ; //動作しません
  4. top ： expression （ expressions （ 'after' 、 this 、 { property ： 'top' 、 options ： 'ccc' } ） ） ;
  5. }
  7. .a1 、 .a2 {
  8. width ： expression （ expressions （ 'firstChild' 、 this 、 { property ： 'width' } ） ） ;
  9. }
  11. テーブル{
  12. width ： expression （ expressions （ 'borderSpacing' 、 this 、 { property ： 'width' 、 options ： '10' } ） ） ;
  13. }
  15. 入力{
  16. height ： expression （ expressions （ 'any' 、 this 、 { property ： 'height' 、 options ： function （ ） { this .runtimeStyle .backgroundColor = 'red' ; } } ） ） ;
  17. width ： expression （ expressions （ expression （ 'attribute' 、 this 、 { property ： 'width' 、 options ： { name ： 'type' 、 value ： 'text' } } ） ） ;
  18. }
  20. .min-max {
  21. min-width ： 400px ;
  22. max-width ： 700px ;
  23. ボーダー ： 10pxの 赤一色 ;
  24. top ： expression （ expressions （ 'width' 、 this ） ） ;
  25. パディング ： 10px ;
  26. マージン ： 10px ;
  27. }


PS


誰かが便利になったら、 ここからダウンロードできます



More articles:


All Articles