clearfix Generator

注意

このJavaScriptは習作です。 至らない点が各所に残っている可能性があるので、参考にする際はご注意ください。

Sample

改行くぎりでセレクタを入力

Code

$(function () {
  $('#clearfixGeneration').click(function(){
    $(this).empty();
    var new_line_switch = $('#newLineOn').attr('checked');
    var selecter_val = $('#selecterInput').val();
    var comma_length = selecter_val.split(',').length;
    var selecter_text = selecter_val.split('\n');

    for(i=0; i<comma_length; i++) {
      var selecter_ie6 = '* html ' + selecter_text[i];
      var selecters_ie6 = selecter_ie6.replace('\n', '');
      if (ie6) {
        ie6 = ie6 + selecters_ie6;
        if(new_line_switch) {ie6 = ie6.replace(',*', ',\n*');}
      } else {
        var ie6 = selecters_ie6;
        if(new_line_switch) {ie6 = ie6.replace(',*', ',\n*');}
      };
      var selecter_ie7 = '*:first-child+html ' + selecter_text[i];
      var selecters_ie7 = selecter_ie7.replace('\n', '');
      if (ie7) {
        ie7 = ie7 + selecters_ie7;
        if(new_line_switch) ie7 = ie7.replace(',*', ',\n*');
      } else {
        var ie7 = selecters_ie7;
        if(new_line_switch) ie7 = ie7.replace(',*', ',\n*');
      };
      var selecter_modernbrowser = selecter_text[i] + ':after';
      var selecter_modernbrowser_substitution = selecter_modernbrowser.replace(',:after',':after,');
      var selecters_modernbrowser = selecter_modernbrowser_substitution.replace('\n', '');
      if (modernbrowser) {
        if(new_line_switch) {
          modernbrowser = modernbrowser + selecters_modernbrowser.replace(':after,', ':after,\n');
        } else {
          modernbrowser = modernbrowser + selecters_modernbrowser;
        }
      } else {
        if(new_line_switch) {
          var modernbrowser = selecters_modernbrowser.replace(':after,', ':after,\n');
        } else {
          var modernbrowser = selecters_modernbrowser;
        }
      };
      $('#clearfixDone').val(''+ ie6 +' {\n\tzoom: 1;\n}\n\n'+ ie7 +' {\n\tzoom: 1;\n}\n\n'+ modernbrowser +' {\n\tcontent: ".";\n\tdisplay: block;\n\tclear: both;\n\theight: 0;\n\tvisibility: hidden;\n}');
    }
  });
});

JavaScript1000本ノック トップページへ