淘汰賽風格的結合不是讓我追加重要

我想要一個背景結合到這樣的表格單元格：淘汰賽風格的結合不是讓我追加重要

data-bind="style: { background: Css }

的CSS變量既可以像等於＃F7C7D4的顏色。

這部分工程，細胞都充滿了色彩，但是當我試圖和打印顏色的頁面沒有顯示。當我嘗試沒有綁定的情況下，如下所示：

<td style="background #F7C7D4 !important;"></td>

顏色顯示在頁面上和打印時。但是當我將代碼更改爲：

data-bind="style: { background: Css + ' !important' }

淘汰賽將不會綁定數據背景。不會拋出錯誤，但屏幕上不顯示顏色，當我檢查元素時，背景樣式尚未添加到樣式屬性中。我也試着改變Css變量來包含！重要的結果，即綁定不起作用。

JSFiddle

任何幫助，將不勝感激。

來源

2015-10-19 pangotek

!important不被樣式的綁定支持。一種選擇是使用css綁定來代替並使用實際的css類。

另一種選擇是使用自定義綁定。這是樣式綁定如何應用Knockout 3.3的風格。

ko.bindingHandlers['style'] = { 
    'update': function (element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor() || {}); 
     ko.utils.objectForEach(value, function(styleName, styleValue) { 
      styleValue = ko.utils.unwrapObservable(styleValue); 

      if (styleValue === null || styleValue === undefined || styleValue === false) { 
       // Empty string removes the value, whereas null/undefined have no effect 
       styleValue = ""; 
      } 

      element.style[styleName] = styleValue; 
     }); 
    } 
};

關鍵部分是element.style[styleName] = styleValue;。

設置樣式不支持!important的這種方法。相反，使用setProperty可以讓你「重要」，但是請注意，這隻適用於IE9 +。

element.style.setProperty('background', '#F7C7D4', 'important');

下面是這個綁定可能看起來像什麼的例子。

ko.bindingHandlers.myCustomStyleBinding = { 
    update: function (element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor() || {}); 
     ko.utils.objectForEach(value, function(styleName, styleValue) { 
      var isImportant = false; 
      styleValue = ko.utils.unwrapObservable(styleValue); 

      if (styleValue === null || styleValue === undefined || styleValue === false) { 
       // Empty string removes the value, whereas null/undefined have no effect 
       styleValue = ""; 
      } 

      isImportant = styleValue.indexOf('!important') > -1; 
      styleValue = styleValue.split(' !important')[0]; 
      element.style.setProperty(styleName, styleValue, isImportant ? 'important' : ''); 
     }); 
    } 
};

來源

2015-10-19 20:54:36 CrimsonChris

我認爲答案是，使用「！重要的」內聯是毫無意義的。內聯樣式聲明覆蓋任何樣式表。

來源

2015-10-19 20:32:33

您可以使用attr結合設置樣式屬性的值）

data-bind="attr:{ style: 'background: ' + Css() + ' !important' }

來源

2016-03-17 06:25:10

淘汰賽風格的結合不是讓我追加重要

回答

相關問題