# Setting CSS Custom Properties with d3 on each element
**URL:** https://talk.observablehq.com/t/setting-css-custom-properties-with-d3-on-each-element/6534
**Category:** Help
**Created:** [May 8, 2022, 10:12pm UTC](https://talk.observablehq.com/t/setting-css-custom-properties-with-d3-on-each-element/6534 "2022-05-08T22:12:38Z")
**Posts on this page:** 4
**Page:** 1
I am working with a svg element & the initial markup is following
```auto
Document
```
I want to call [getTotalLength](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength) on each `path` and set that as CSS custom properties for each `path`.
By using vanilla, I can do this
```auto
document.querySelectorAll("[class^='line']")
.forEach(
(a, i) => {
a.style.setProperty('--pathLength', a.getTotalLength());
}
);
```
which gives me
I was wondering, how can I replicate this in `d3`. So far, I tried this which is doing the job but I am doing the same selection twice.
```auto
d3.selectAll("[class^='line']")
.style('--pathLength', (d, i) => {
const dataset = d3.selectAll("[class^='line']");
return `${dataset['_groups'][0][i].getTotalLength()}`
});
```
Is there a better way to achieve this?
The full code is following
```auto
Document
```
---
In D3, the `selection.style` method takes a property name (`"--pathLength"`) and a callback, which is invoked with the element as the value of `this`, so you can return `this.getTotalLength()`:
```nohighlight
d3.selectAll("[class^='line']")
.style("--pathLength", function (d, i) {
return this.getTotalLength();
});
```
Note that, for the value of `this` to be the element, you can’t use [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), which don’t get their own `this`. That is, you can’t write `(d, i) => { ... }`, like you did in your example; you have to write `function(d, i) { ... }`.
Here’s an example:
> **[Setting path length as CSS property variable with D3](https://observablehq.com/@tophtucker/setting-path-length-as-css-property-variable-with-d3)**
>
> Smpa01 asks in the forum: I want to call getTotalLength on each path and set that as CSS custom properties for each path. By using vanilla, I can do this: I was wondering, how can I replicate this in d3. In D3, you can do something very similar. The...
---
@tophtucker many thanks for this. However, I have a follow-up question. I am new to d3 and currently experimenting with d3 API.
I have conducted the following experiment to get more clarification on use of `d` and `this`
```auto
Document
```
As you can notice, line **38** requires _ **`this`** _ and line **55** requires _ **`d`** _
Is it kindly possible for you to shed some light on this as to when to use _ **`this`** _ and when to use
_ **`d`** _.
From this example, it is explanatory that `this` is required for modifying existing elements and `d` is used for the new data-driven element.
Since I am new to d3, I am not sure if this is the correct inference ? I would love to hear some explanation from you.
---
> [@smpa01](#):
>
> Is it kindly possible for you to shed some light on this as to when to use _ **`this`** _ and when to use
> _ **`d`** _.
I can never keep this straight myself so I often myself using a `console.log` to examine those things. For example, you might type:
```
.attr('some_attribute', function(a,b) {
console.log([a,b,this])
...
}
```
That way, you can simply examine the contents of those variables and decide how to act accordingly.