javascript - 如果支持 box-shadow 则隐藏边框

标签 javascript css

我有一个带有边框和框阴影的 div:

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

边框很难看,但对于不支持阴影的浏览器来说是必须的(div的背景与周围元素颜色相同)。

如何检测浏览器是否支持box-shadow,并去除box shadow?也许使用 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;');
  }
}

最佳答案

您可以使用 javascript 检查 box-shadow 浏览器支持:

if ('boxShadow' in document.body.style ) 
{
    alert('I can support shadow!');
}

关于javascript - 如果支持 box-shadow 则隐藏边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11575524/

相关文章:

javascript - DOM 操作与模板

html - 需要两条斜线形成一个点并使用 CSS/HTML 作为页面的中断

html - 直接从服务器加载图片

javascript - 将元素插入数组仅在循环内有效

javascript - 即使客户端没有提供回调,有没有办法从服务器发送响应?

javascript - Parent-Iframe postMessage通信

css - 将窗口调整为较小时,绝对位于右侧的 div 会超过左侧 div

javascript - 使用关键帧动画光标不起作用

javascript - 显示阿拉伯文字

javascript - 使用 ionic、cordova 或 javascript 验证电子邮件地址是否存在