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

Question

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

这是我的CSS选择器，如果在页面加载时DOM中已经包含了style属性，则可以正常工作：

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中确实如此）。 对于您的特定浏览器，您可能需要删除空格，并针对大多数^1个浏览器，同时使用两个版本的attribute-value字符串，从而得到：

.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()方法似乎更新了元素的style属性的display属性，而不是直接设置该属性。 。 更新后的属性值（如表示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?([az]+)/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：
  • 子字符串匹配属性选择器 。
• JavaScript的：
  • HTMLElement.style 。
  • JavaScript正则表达式 。
  • String.prototype.indexOf() 。
  • String.prototype.replace() 。
• jQuery的：
  • attr() 。
  • hide() 。
  • show() 。
  • toggle() 。