Lets say I have a react DOM element like this one:

render () {
  ...
  return (
    <div className = "widePaddingRight" style = {{width: "100px"}}
      ref = "pickMe"
    >
      ...
    </div>
  )
}

CSS:

.widePaddingRight{
  paddingRight: 20px
}

If I access this element later and try to get its width like that:

ponentDidMount () {
  var elem = this.refs.pickMe.getDOMNode().getBoundingClientRect()
  console.log(elem.width)
}

I get 120 in my console. My expected result was 100. Since I have to calculate with the original width I have to get the padding-attributes of the element.

Question: How can I get the paddingRight attribute of my ponent in my react-class?

Update With the input of @Mike 'Pomax' Kamermans I was able to solve the underlying problem (thank you for that): Just add box-sizing: border-box to the CSS. Now getBoundingClientRect() gives 100 instead of 120.

I still dont know how to get a css class-attribute from a mounted div - any suggestions?

Lets say I have a react DOM element like this one:

render () {
  ...
  return (
    <div className = "widePaddingRight" style = {{width: "100px"}}
      ref = "pickMe"
    >
      ...
    </div>
  )
}

CSS:

.widePaddingRight{
  paddingRight: 20px
}

If I access this element later and try to get its width like that:

ponentDidMount () {
  var elem = this.refs.pickMe.getDOMNode().getBoundingClientRect()
  console.log(elem.width)
}

I get 120 in my console. My expected result was 100. Since I have to calculate with the original width I have to get the padding-attributes of the element.

Question: How can I get the paddingRight attribute of my ponent in my react-class?

Update With the input of @Mike 'Pomax' Kamermans I was able to solve the underlying problem (thank you for that): Just add box-sizing: border-box to the CSS. Now getBoundingClientRect() gives 100 instead of 120.

I still dont know how to get a css class-attribute from a mounted div - any suggestions?

• javascript
• reactjs

• Counter question: why do you need to? if you're using React, you shouldn't need to mess with the styling of your ponent unless a props (from the parent) or state (from the ponent itself) change occurs, at which point your render() function is responsible for generating the "what it should now look like" ReactJS code, which React then uses to generate a diff, applying only the difference between old and new content to the DOM. – Mike 'Pomax' Kamermans Commented Oct 22, 2015 at 18:14
• And on a more HTML/CSS/JS technical point: right click on the element in the browser, hit "inspect element" and look at the puted box model. How big does the browser say it is? There are two ways to do box sizing in CSS; the old quirky model will yield 100px, the modern default model will yield 120px. – Mike 'Pomax' Kamermans Commented Oct 22, 2015 at 18:18
• Think on a div that can be resized by the user by dragging the mouse at its corner from left to right. You would add a kind of new_width prop during dragging (state) that is used in the render() method. – Benvorth Commented Oct 22, 2015 at 18:19
• No you wouldn't. You'd make the div responsible for its own resizing by giving it a resize handler, and then as the user drag-resizes the ponent, which calls the resize handler, you process the "what it should now be" width based on the event values, then bind the new width you pute using this.setState({ width: puted}), and then you have the render function generate the appropriate content, <div style={{ width: this.state.width }} ...... – Mike 'Pomax' Kamermans Commented Oct 22, 2015 at 18:20
• thats exactly what I am doing. You need an initial width to make this work. – Benvorth Commented Oct 22, 2015 at 18:23

1 Answer 1

You need window.getComputedStyle.

const style = window.getComputedStyle(React.findDOMNode(this.refs.pickMe));