扩展jquery.css函数以覆盖!重要样式

Question

我正在编写一个邮件模板编辑器,用户可以使用我们的可视化编辑器导入他们现有的模板并重新设计模板.如果用户更改的元素具有!important样式属性; 我们必须使用jquery.css覆盖该属性.

例如:

 <div id="sendwrapper">
      <button> Send </button>
 </div>

样式

#sendwrapper * {
   color:white !important;
}

我想改变颜色白色到绿色.我试过这个插件https://github.com/premasagar/important/blob/master/important.js.这个插件并不是那么聪明,它对所有属性都很重要,但我希望它应该设置!仅对于设置的重要属性很重要.

Answer 1

如果浏览器支持Proxy（ES6），则可以使用此插件：

if ( // Check browser support
  window.Proxy
  && window.CSSStyleDeclaration
  && CSSStyleDeclaration.prototype.setProperty
) {
  jQuery.cssHooks = new Proxy(jQuery.cssHooks, {
    get: function(hooks, name) {
      return new Proxy(hooks[name] || (hooks[name] = {}), {
        has: function (hook, setget) {
          return setget === 'set' || setget in hook;
        },
        get: function (hook, setget){
          if(setget !== 'set') return hook[setget];
          return function(elem, value, extra) {

            // Use the cssHook setter, if any
            if(hook.set) {
              value = hook.set(elem, value, extra);
              if(value === void 0) return; // No value
            }

            // Set the desired value without !important
            elem.style[ name ] = value;

            // Get the computed value
            var computedValue = jQuery.css(elem, name);

            // Check if the computed value is the desired one
            if(computedValue === value) return; // OK

            // Set the desired value with !important
            elem.style.setProperty(name, value, "important");

            // Check if the computed value has changed
            if(computedValue !== jQuery.css(elem, name)) return; // OK

            // Otherwise !important is not needed, so remove it
            elem.style.setProperty(name, value);
          }
        }
      });
    }
  });
}

// Plugin compiled with Closure Compiler
window.Proxy&&window.CSSStyleDeclaration&&CSSStyleDeclaration.prototype.setProperty&&(jQuery.cssHooks=new Proxy(jQuery.cssHooks,{get:function(f,b){return new Proxy(f[b]||(f[b]={}),{has:function(b,a){return"set"===a||a in b},get:function(e,a){return"set"!==a?e[a]:function(d,c,a){if(e.set&&(c=e.set(d,c,a),void 0===c))return;d.style[b]=c;a=jQuery.css(d,b);a!==c&&(d.style.setProperty(b,c,"important"),a===jQuery.css(d,b)&&d.style.setProperty(b,c))}}})}}));

// The elements in the collection that need !important will use it
$('.color').css('color', 'blue');

// The plugin is compatible with custom cssHooks
$.cssHooks.opacity.set = function(elem, value) { return value/4 + '' };
$('.opacity').css('opacity', .8);

.color {
   color: red;
}
.color.important {
   color: red !important;
}
.opacity.important {
   opacity: 1 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="color">color: blue</div>
<div class="color important">color: blue !important</div>
<div class="opacity important">opacity: .2 !important</div>

请注意，上面的代码将自动创建对象jQuery.cssHooks，例如查找$.cssHooks.color将存储$.cssHooks.color = {}。如果您不想这样做，请使用其他代码。

if ( // Check browser support
  window.Proxy
  && window.CSSStyleDeclaration
  && CSSStyleDeclaration.prototype.setProperty
) {
  jQuery.cssHooks = new Proxy(jQuery.cssHooks, {
    get: function(hooks, name) {
      return new Proxy(hooks[name] || {}, {
        has: function(hook, setget) {
          return setget === 'set' || setget in hook;
        },
        set: function(hook, setget, value) {
          if(!hooks[name]) hooks[name] = hook;
          hook[setget] = value;
          return true;
        },
        get: function(hook, setget){
          if(setget !== 'set') return hook[setget];
          return function(elem, value, extra) {

            // Use the cssHook setter, if any
            if(hook.set) {
              value = hook.set(elem, value, extra);
              if(value === void 0) return; // No value
            }

            var style = elem.style;

            // Set the desired value without !important
            style[ name ] = value;

            // Get the computed value
            var computedValue = jQuery.css(elem, name);
            
            // Check if the computed value is the desired one
            if(computedValue === value) return; // OK

            // Set the desired value with !important
            style.setProperty(name, value, "important");

            // Check if the computed value has changed
            if(computedValue !== jQuery.css(elem, name)) return; // OK

            // Otherwise !important is not needed, so remove it
            elem.style.setProperty(name, value);
          }
        }
      });
    }
  });
}

// The elements in the collection that need !important will use it
$('.color').css('color', 'blue');

// The plugin is compatible with custom cssHooks
if(!$.cssHooks.opacity) $.cssHooks.opacity = {};
$.cssHooks.opacity.set = function(elem, value) { return value/4 + '' };
$('.opacity').css('opacity', .8);

.color {
   color: red;
}
.color.important {
   color: red !important;
}
.opacity.important {
   opacity: 1 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="color">color: blue</div>
<div class="color important">color: blue !important</div>
<div class="opacity important">opacity: .2 !important</div>