diff --git a/README.md b/README.md
index 4599263..7be496e 100644
--- a/README.md
+++ b/README.md
@@ -252,6 +252,10 @@ var div = selection.selectAll(d3.selectorAll("div"));
Returns the owner window for the specified *node*. If *node* is a node, returns the owner document’s default view; if *node* is a document, returns its default view; otherwise returns the *node*.
+# d3.style(node, name) [<>](https://github.com/d3/d3-selection/blob/master/src/selection/style.js#L32 "Source")
+
+Returns the value of the style property with the specified *name* for the specified *node*. If the *node* has an inline style with the specified *name*, its value is returned; otherwise, the [computed property value](https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value) is returned. See also [*selection*.style](#selection_style).
+
### Modifying Elements
After selecting elements, use the selection’s transformation methods to affect document content. For example, to set the name attribute and color style of an anchor element:
@@ -292,7 +296,7 @@ If a *value* is not specified, returns true if and only if the first (non-null)
If a *value* is specified, sets the style property with the specified *name* to the specified value on the selected elements and returns this selection. If the *value* is a constant, then all elements are given the same style property value; otherwise, if the *value* is a function, it is evaluated for each selected element, in order, being passed the current datum (*d*), the current index (*i*), and the current group (*nodes*), with *this* as the current DOM element (*nodes*[*i*]). The function’s return value is then used to set each element’s style property. A null value will remove the style property. An optional *priority* may also be specified, either as null or the string `important` (without the exclamation point).
-If a *value* is not specified, returns the current computed value of the specified style property for the first (non-null) element in the selection. This is generally useful only if you know the selection contains exactly one element. The computed value **may be different than the previously-set value**, particularly if it was set using a shorthand property (such as the `font` style, which is shorthand for `font-size`, `font-face`, etc.).
+If a *value* is not specified, returns the current value of the specified style property for the first (non-null) element in the selection. The current value is defined as the element’s inline value, if present, and otherwise its [computed value](https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value). Accessing the current style value is generally useful only if you know the selection contains exactly one element.
Caution: unlike many SVG attributes, CSS styles typically have associated units. For example, `3px` is a valid stroke-width property value, while `3` is not. Some browsers implicitly assign the `px` (pixel) unit to numeric values, but not all browsers do: IE, for example, throws an “invalid arguments” error!
diff --git a/index.js b/index.js
index 08422d2..85be081 100644
--- a/index.js
+++ b/index.js
@@ -9,6 +9,7 @@ export {default as selectAll} from "./src/selectAll";
export {default as selection} from "./src/selection/index";
export {default as selector} from "./src/selector";
export {default as selectorAll} from "./src/selectorAll";
+export {styleValue as style} from "./src/selection/style";
export {default as touch} from "./src/touch";
export {default as touches} from "./src/touches";
export {default as window} from "./src/window";
diff --git a/src/selection/style.js b/src/selection/style.js
index 1cc291a..6a4be39 100644
--- a/src/selection/style.js
+++ b/src/selection/style.js
@@ -21,13 +21,15 @@ function styleFunction(name, value, priority) {
}
export default function(name, value, priority) {
- var node;
return arguments.length > 1
? this.each((value == null
? styleRemove : typeof value === "function"
? styleFunction
: styleConstant)(name, value, priority == null ? "" : priority))
- : defaultView(node = this.node())
- .getComputedStyle(node, null)
- .getPropertyValue(name);
+ : styleValue(this.node(), name);
+}
+
+export function styleValue(node, name) {
+ return node.style.getPropertyValue(name)
+ || defaultView(node).getComputedStyle(node, null).getPropertyValue(name);
}
diff --git a/test/selection/style-test.js b/test/selection/style-test.js
index 168f88c..9323657 100644
--- a/test/selection/style-test.js
+++ b/test/selection/style-test.js
@@ -2,9 +2,29 @@ var tape = require("tape"),
jsdom = require("jsdom"),
d3 = require("../../");
-tape("selection.style(name) returns the computed value of the style property with the specified name on the first selected element", function(test) {
+tape("d3.style(node, name) returns the inline value of the style property with the specified name on the first selected element, if present", function(test) {
+ var node = {style: {getPropertyValue: function(name) { return name === "color" ? "red" : ""}}};
+ test.equal(d3.style(node, "color"), "red");
+ test.end();
+});
+
+tape("d3.style(node, name) returns the computed value of the style property with the specified name on the first selected element, if there is no inline style", function(test) {
+ var style = {getPropertyValue: function(name) { return name === "color" ? "rgb(255, 0, 0)" : ""}},
+ node = {style: {getPropertyValue: function() { return ""; }}, ownerDocument: {defaultView: {getComputedStyle: function(n) { return n === node ? style : null; }}}};
+ test.equal(d3.style(node, "color"), "rgb(255, 0, 0)");
+ test.end();
+});
+
+tape("selection.style(name) returns the inline value of the style property with the specified name on the first selected element, if present", function(test) {
+ var node = {style: {getPropertyValue: function(name) { return name === "color" ? "red" : ""}}};
+ test.equal(d3.select(node).style("color"), "red");
+ test.equal(d3.selectAll([null, node]).style("color"), "red");
+ test.end();
+});
+
+tape("selection.style(name) returns the computed value of the style property with the specified name on the first selected element, if there is no inline style", function(test) {
var style = {getPropertyValue: function(name) { return name === "color" ? "rgb(255, 0, 0)" : ""}},
- node = {ownerDocument: {defaultView: {getComputedStyle: function(n) { return n === node ? style : null; }}}};
+ node = {style: {getPropertyValue: function() { return ""; }}, ownerDocument: {defaultView: {getComputedStyle: function(n) { return n === node ? style : null; }}}};
test.equal(d3.select(node).style("color"), "rgb(255, 0, 0)");
test.equal(d3.selectAll([null, node]).style("color"), "rgb(255, 0, 0)");
test.end();