如何隐藏哪些有calc css？

Question

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

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

我试过了：

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

但似乎错误的方法呢？

demo

Answer 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/

Answer 2

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

这是一个有点丑陋的黑客我想出来了，它确实过滤了你的要求。

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

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

Answer 3

在Jquery中，您也可以尝试 indexOf()

<强> SEE DEMO

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