Merge pull request #2302 from knockout/231-improve-style-binding

Style binding improvements
knockout · Oct 1, 2017 · 253d39c · 253d39c
2 parents 7c61332 + 5f360aa
commit 253d39c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/spec/defaultBindings/styleBehaviors.js b/spec/defaultBindings/styleBehaviors.js
@@ -13,13 +13,38 @@ describe('Binding: CSS style', function() {
         expect(testNode.childNodes[0].style.backgroundColor).toEqual("");
     });
 
+    it('Should be able to use standard CSS style name (rather than JavaScript name)', function () {
+        var myObservable = new ko.observable("red");
+        testNode.innerHTML = "<div data-bind='style: { \"background-color\": colorValue }'>Hallo</div>";
+        ko.applyBindings({ colorValue: myObservable }, testNode);
+
+        expect(testNode.childNodes[0].style.backgroundColor).toEqualOneOf(["red", "#ff0000"]); // Opera returns style color values in #rrggbb notation, unlike other browsers
+        myObservable("green");
+        expect(testNode.childNodes[0].style.backgroundColor).toEqualOneOf(["green", "#008000"]);
+        myObservable(undefined);
+        expect(testNode.childNodes[0].style.backgroundColor).toEqual("");
+    });
+
+    it('Should be able to apply the numeric value to a style and have it converted to px', function() {
+        // See https://github.com/knockout/knockout/issues/231
+        testNode.innerHTML = "<div data-bind='style: { width: 10 }'></div>";
+        ko.applyBindings(null, testNode);
+        expect(testNode.childNodes[0].style.width).toBe("10px");
+    });
+
     it('Should be able to apply the numeric value zero to a style', function() {
         // Represents https://github.com/knockout/knockout/issues/972
         testNode.innerHTML = "<div data-bind='style: { width: 0 }'></div>";
         ko.applyBindings(null, testNode);
         expect(testNode.childNodes[0].style.width).toBe("0px");
     });
 
+    it('Should be able to apply the numeric value to a style that doesn\'t accept pixels', function() {
+        testNode.innerHTML = "<div data-bind='style: { zIndex: 10 }'></div>";
+        ko.applyBindings(null, testNode);
+        expect(testNode.childNodes[0].style.zIndex).toEqualOneOf(["10", 10]);
+    });
+
     it('Should be able to use "false" to remove a style', function() {
         // Verifying that the fix for 972 doesn't break this existing behaviour
         testNode.innerHTML = "<div style='width: 100px' data-bind='style: { width: false }'></div>";

diff --git a/src/binding/defaultBindings/style.js b/src/binding/defaultBindings/style.js
@@ -9,7 +9,19 @@ ko.bindingHandlers['style'] = {
                 styleValue = "";
             }
 
-            element.style[styleName] = styleValue;
+            if (jQueryInstance) {
+                jQueryInstance(element)['css'](styleName, styleValue);
+            } else {
+                styleName = styleName.replace(/-(\w)/g, function (all, letter) {
+                    return letter.toUpperCase();
+                });
+
+                element.style[styleName] = styleValue;
+
+                if (styleValue !== '' && element.style[styleName] == '' && !isNaN(styleValue)) {
+                    element.style[styleName] = styleValue + "px";
+                }
+            }
         });
     }
 };