0

境界線とボックスの影を持つ div があります。

div.my-div
{
    border: 1px solid #555;
    box-shadow: 0px 4px 35px rgba(0,0,0,0.5);
}

境界線は醜いですが、影をサポートしていないブラウザには必要です (div の背景は周囲の要素と同じ色です)。

ブラウザがボックス シャドウをサポートしているかどうかを検出し、ボックス シャドウを削除するにはどうすればよいですか? おそらくjavascriptで？

編集：依存関係（modernizrなど）なしでこれを行いたいです。

例えば：

var boxShadowSupported = ???;
if (boxShadowSupported && typeof(document.getElementsByClassName) != 'undefined') {
  var elements = document.getElementsByClassName('my-div');
  for (var i= 0; i < elements.length; i++) {
    elements[i].setAttribute('style', 'border: 0;');
  }
}
4

2 に答える 2

3

javascript で box-shadow ブラウザーのサポートを確認できます。

if ('boxShadow' in document.body.style ) 
{
    alert('I can support shadow!');
}
于 2012-07-20T08:42:09.407 に答える
0

多分あなたはこれを試すことができます：

var foo=document.createElement("div");
foo.style.boxShadow="0px 0px 0px rgb(0,0,0)";
document.body.appendChild(foo);
var boxShadowSupported=foo.style.boxShadow?1:0;
于 2012-07-20T08:43:53.087 に答える