如何隐藏哪些有 calc css？答案

【问题标题】：How to hide which have calc css?如何隐藏哪些有 calc css？
【发布时间】：2014-03-07 17:40:51
【问题描述】：

我想隐藏具有 calc css3 的元素：

nav{width: calc(100% - 20px); height: 50%;}

我试过了：

 $('*').filter(function() {
     return $(this).css('width') == 'calc';
 }).css("display","none");

但似乎方法不对？

demo

【问题讨论】：

参考下面的链接它可能对你有帮助stackoverflow.com/questions/17820559/…
css 返回 computed 样式，您应该阅读并过滤 CSS 规则，它非常昂贵。

标签： jquery

【解决方案1】：

css 方法返回 computed 属性值，你应该阅读并过滤初始 CSS 规则：

var s = document.styleSheets[1], // the second stylesheet (for jsfiddle)
    rules = s.cssRules,
    selector = [],
    l = rules.length;

for ( var i = 0; i < l; i++ ) {
    if ( rules[i].style['width'].indexOf('calc') > -1 ) {
        selector.push( rules[i].selectorText );
    }
}

$( selector.join() ).hide();

http://jsfiddle.net/webozine/9EZ3k/

【讨论】：

即使浏览器不支持 calc 是否也能工作，因为不支持从它们中删除样式？
@C-link 不，因为calc 对它们来说是一个未知（或无效）值，那些浏览器应该将该值设置为一个空字符串。
如果可以，我可以使用空字符串吗？不-这不是好方法。那么有什么想法吗？
@C-link 好吧，唯一的选择是读取样式表的正文，可能使用正则表达式。

【解决方案2】：

jQuery 不支持在 CSS 中使用 calc() 函数的过滤器。以下是我测试放大并查看nav对象的css属性变化的屏幕截图。

这是我想出的一个有点丑陋的 hack，但它确实过滤了您的要求。

$('*').filter(function() {
     return  $(this).css('width') == $(this).parent().width()-150 + "px";;
 }).css("display","none");

或者，确实，添加一个 css 类并解决问题..

【讨论】：

仅供参考：请参阅此演示 jsfiddle.net/7DrVE/15 这不是过滤器，而是无法使用的背景？
是的，你是对的，对不起。更新后的 js 函数将过滤属性为“width:calc(100% - 150px)”的 css 类，请检查

【解决方案3】：

在 Jquery 中，您也可以通过 indexOf()

尝试

SEE DEMO

$('*').filter(function() {
          return $(this).css('width').indexOf('calc');
 }).css("display","none");

【讨论】：