Question

.variations_button[style*="display: none;"] + div

这是我的CSS选择器，如果style属性已经在页面加载的DOM中，那么它可以正常工作：

http://jsfiddle.net/xn3y3hu0/

但是，如果我使用javascript隐藏.variations_button div，则选择器不再起作用：

$(document).click(function(){
    $('.variations_button').hide();
});

http://jsfiddle.net/55seee1r/

任何想法都错了吗？看起来CSS没有刷新，因为如果我使用检查器编辑另一个属性，颜色会立即变为红色。

Answer 1

由于您使用的选择器[style*="display: none;"]正在寻找"display: none;"属性中style的完全字符串，它需要浏览器的JavaScript引擎插入精确的字符串，包括空白字符（顺便提一下，它在Chrome 39 / Windows 8.1中）。对于您的特定浏览器，您可能需要删除空间，并且要定位大多数¹浏览器，请使用属性值字符串的两个版本，并给出：

.variations_button[style*="display: none;"] + div,
.variations_button[style*="display:none;"] + div

.variations_button[style*="display: none;"]+div,
.variations_button[style*="display:none;"]+div {
  color: red;
}

<div class="variations_button" style="display: none;">asd</div>
<div>test</div>

当然，使用类来隐藏元素，使用JavaScript切换该类，并将该类用作CSS选择器的一部分仍然更加简单，例如：

$('.variations_button + div').on('click', function() {
  $('.variations_button').toggleClass('hidden');
});

.hidden {
  display: none;
}
.hidden + div {
  color: red;
}
.variations_button + div {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="variations_button">asd</div>
<div>test</div>

据我所知，jQuery涉及的上述问题不能正常工作，因为jQuery的hide()，show()和toggle()方法似乎更新元素的display属性的style属性，而不是直接设置属性。更新的属性值（如style属性中所示）似乎是style属性的表示（可能来自其cssText）。由于该属性未更改，仅用作属性的表示，因此CSS属性选择器不会，或者不能匹配。

那就是说，一个有点笨重的解决方法是直接设置属性;在下面的演示中，这使用了jQuery的attr()方法（尽管原生DOM node.setAttribute()同样可以正常工作）：

  $(document).click(function() {
    // setting the style attribute of the selected element(s),
    // using the attr() method, and the available anonymous function:
    $('.variations_button').attr('style', function(i, style) {
      // i: the index of the current element from the collection,
      // style: the current value (before manipulation) of the attribute.

      // caching the cssText of the node's style object:
      var css = this.style.cssText;

      // if the string 'display' is not found in the cssText:
      if (css.indexOf('display') === -1) {
        // we return the current text plus the appended 'display: none;' string:
        return css + 'display: none;';
      // otherwise:
      } else {
        // we replace the string starting with 'display:', followed by an
        // optional white-space ('\s?'), followed by a matching string of
        // one or more alphabetic characters (grouping that last string,
        // parentheses):
        return css.replace(/display:\s?([a-z]+)/i, function(a, b) {
          // using the anonymous function available to 'replace()',
          // a: the complete match, b: the grouped match (a-z),
          // if b is equal to none we return 'display: block', otherwise
          // we return 'display: none':
          return 'display: ' + (b === 'none' ? 'block' : 'none');
        });
      }
    });
  });

jQuery(document).ready(function($) {

  $(document).click(function() {
    $('.variations_button').attr('style', function(i, style) {
      var css = this.style.cssText;
      if (css.indexOf('display') === -1) {
        return css + 'display: none;';
      } else {
        return css.replace(/display:\s?([a-z]+)/i, function(a, b) {
          return 'display: ' + (b === 'none' ? 'block' : 'none');
        });
      }
    });
  });

});

.variations_button[style*="display: none;"]+div {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="variations_button">asd</div>
<div>test</div>

参考文献：

CSS：
- Substring Matching Attribute-selectors。
JavaScript的：
jQuery的：
- attr()。
- hide()。
- show()。
- toggle()。

使用javascript应用属性时，CSS属性选择器不起作用？

1 个答案: