9

:nth-childブラウザのサポートをテストするためにmodernizrを使用しようとしていますが、その方法がわかりません.これを見つけましたhttp://jsfiddle.net/laustdeleuran/3rEVe/:last-child検出するように変更します（サポートし:nth-childていないブラウザはどちらもサポートしていないと信じているので、そのように使用することも考えていましたが、よくわかりません）:last-child:nth-child

皆さん、私を助けてくれますか? 前もって感謝します！

4

4 に答える 4

13

:nth-child サポートを検出する関数を作成しました

function isNthChildSupported(){
var result = false,
    test =  document.createElement('ul'),
    style = document.createElement('style');
test.setAttribute('id', 'nth-child-test');
style.setAttribute('type', 'text/css');
style.setAttribute('rel', 'stylesheet');
style.setAttribute('id', 'nth-child-test-style');
style.innerHTML = "#nth-child-test li:nth-child(even){height:10px;}";
for(var i=0; i<3; i++){
    test.appendChild(document.createElement('li'));   
}
document.body.appendChild(test);
document.head.appendChild(style);
  if(document.getElementById('nth-child-test').getElementsByTagName('li')[1].offsetHeight == 10) {result = true;}
document.body.removeChild(document.getElementById('nth-child-test'));
document.head.removeChild(document.getElementById('nth-child-test-style'));
  return result;
}

使用法：

isNthChildSupported() ? console.log('yes nth child is supported') : console.log('no nth child is NOT supported');

これが実際に動作しているのを見ることができます http://jsbin.com/epuxus/15

また、 jQuery:nth-childとCSS:nth-childには違いがあります。

jQuery:nth-child は、jQuery がサポートするすべてのブラウザーでサポートされていますが、CSS:nth-child はIE9、Chrome、Safari、および Firefox でサポートされています。

于 2011-10-03T01:45:09.377 に答える
3

セレクターのサポートをテストした Modernizr セレクター プラグインがあったことを覚えていますが、今は見つかりません。これを見ることができます: http://javascript.nwbox.com/CSSSupport/これは似ています。

于 2011-10-03T09:42:22.437 に答える
2

Selectivizrを使用して、サポートされていないブラウザーにCSS3セレクターのサポートを追加することもできます。

于 2012-07-19T17:34:52.067 に答える
1

モーセン、決断してくれてありがとう。jQuery が必要な場合:

function test(){

  var result = false,
      test =  $('<ul id="nth-child-test"><li/><li/><li/></ul>').appendTo($('body')),
      style = $('<style type="text/css">#nth-child-test li:nth-child(even){height:10px;}</style>').appendTo($('head'));

  if(test.children('li').eq(1).height() == 10)
    result = true;

  test.remove();
  style.remove();

  return result;

};
于 2014-02-21T01:17:52.767 に答える