Reactjs: How to get a css-class attribute from a mounted <div>?

Question

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:

componentDidMount () {
  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 component 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?

Counter question: why do you need to? if you're using React, you shouldn't need to mess with the styling of your component unless a props (from the parent) or state (from the component 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
– 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 computed 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
– 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
– 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 component, 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 compute using this.setState({ width: computed}), and then you have the render function generate the appropriate content, <div style={{ width: this.state.width }} ...... — Mike 'Pomax' Kamermans
– 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
– Benvorth, Commented Oct 22, 2015 at 18:23

Tom Chen · Accepted Answer · 2015-10-23 00:46:36Z

5

You need window.getComputedStyle.

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

answered Oct 23, 2015 at 0:46

Tom Chen

1,5182 gold badges12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Reactjs: How to get a css-class attribute from a mounted <div>?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related