Jquery在加载时关闭box-shadow答案

【问题标题】：Jquery turn off box-shadow on loadJquery在加载时关闭box-shadow
【发布时间】：2011-11-22 09:47:32
【问题描述】：

如果用户打开了javascript，我有一些元素周围默认有一个CSS3 box-shadow，但我想隐藏box-shadow。

我目前正在使用下面的代码来隐藏其他元素，这个方法除了 box-shadow 效果很好。我做了一些测试，即将其他代码放在'box-shadow：none'所在的位置并且它总是按预期工作，因此我认为这是CSS3 box-shadow属性和jquery的兼容性问题。

任何人都可以想办法解决这个问题吗？或者也许是另一种在页面加载时关闭 box-shadow 属性的方法。

提前感谢您的帮助。

$('html').append('<style type="text/css">.sub-menu{width:897px;display:none;} .sub-menu-header{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}</style>');

子菜单标题的 CSS

.sub-menu-header{
   -moz-box-shadow: 1px 1px 5px #000;
   -webkit-box-shadow: 1px 1px 5px #000;
   box-shadow: 1px 1px 5px #000;
   border:1px solid #CCC;
   cursor:pointer; 
}

【问题讨论】：

box-shadow 是否设置了相同的选择器specificity (.sub-menu-header)？
是的，我已经为子菜单标题添加了css代码以使其更清晰

标签： jquery css

【解决方案1】：

你可以在你的 html 标签中添加一个 no-js 类：<html class="no-js">

添加您的样式：

.no-js .sub-menu-header{
   -moz-box-shadow: 1px 1px 5px #000;
   -webkit-box-shadow: 1px 1px 5px #000;
   box-shadow: 1px 1px 5px #000;
}
.sub-menu-header{
   border:1px solid #CCC;
   cursor:pointer; 
}

然后只需删除 javascript 文件中的 no-js 类：

$("html").removeClass("no-js");

【讨论】：

【解决方案2】：

如果你不能修改你的 CSS，一个更好的方法是使用 jQuery 的 css 方法。确保 box-shadow 属性不是由 CSS 中的类选择器指定的：

$(document).ready(function () {
  $(".sub-menu-header").css("box-shadow", "none");
});

【讨论】：

感谢您的帮助，虽然这可行，但盒子阴影会在隐藏之前闪现，我不希望用户看到任何内容