Question 227815 in Html Question posted in
Some basic documentation can be found here.

why the child html element offsetLeft get unexpect length value

I have a simple docoument like this:

import React from 'react';
import styles from "./App.module.css";

const App: React.FC = () => {

  React.useEffect(()=>{
    var cavas = document.getElementById('cavas');
    console.log(cavas?.offsetLeft);
  },[]);

  return (<div>
    <div className={styles.dbody}>
      <div className={styles.cavasBody}>
        <canvas id="cavas"></canvas>
        <div className={styles.container}>dddd</div>
      </div>
    </div>
  </div>);
}

export default App;

and this is the css:

.dbody {
  background-color: gray;
  height: 100vh;
}

.cavasBody{
  margin-left: 100px;
  background-color:red;
}

.container{
  margin-top: 20px;
  background-color: blue;
  height: 100px;
}

when I tried to get the cavas offset left value. the value is 100, the cavas left offset is the distance about cavasBody and cavas, it should be 0. why get the left offset value is 100? what should I do to get the offset with the parent element, the left offset of cavas and cavasBody?

Tags:

3

Answers


  1. 0

    The offsetLeft property returns the number of pixels that the left edge of the canvas is offset to the left within the offsetParent node. In your case, the canvas element is nested inside the cavasBody div, which has a margin-left of 100px.

    This means that the canvas element is indeed offset by 100 pixels from the left edge of its offsetParent, which is the cavasBody div. Therefore, when you log the offsetLeft value, it correctly returns 100.

    If you want to get the offsetLeft value as 0, you can remove the margin-left property from the cavasBody class in your CSS.

    Login or Signup to reply.
  2. 0

    To get the correct offsetLeft value of the canvas, you can either set the margin-left property of the cavasBody element to 0, or you can use the getBoundingClientRect() method to get the bounding rectangle of the canvas element. The bounding rectangle includes the margin and padding of the element, so the getBoundingClientRect() method will return the correct offsetLeft value for the canvas element.

    import React from 'react';
import styles from './App.module.css';

const App: React.FC = () => {

  React.useEffect(()=>{
    var cavas = document.getElementById('cavas');
    console.log(cavas?.offsetLeft);
  },[]);

  return (<div>
    <div className={styles.dbody}>
      <div className={styles.cavasBody}>
        <canvas id="cavas"></canvas>
        <div className={styles.container}>dddd</div>
      </div>
    </div>
  </div>);
}

export default App;

const styles = {
  dbody: {
    background-color: gray,
    height: 100vh,
  },
  cavasBody: {
    margin-left: 100px,
    background-color: red,
  },
  container: {
    margin-top: 20px,
    background-color: blue,
    height: 100px,
  },
};
    Login or Signup to reply.
  3. 0

    Because you specifyed a "margin-left: 100px" css property.
    (.offsetLeft property in the most cases shows actual left from the corner)
    Check it out:

    <!DOCTYPE html>
<html>
 <head></head>
  <body style="margin: 0">
     <div style="margin-left: 50px;">
        <canvas style="margin-left: 100px; botder: 1px solid green"
             onclick="console.info(this.offsetLeft)"
         </canvas>
       </div>
  </body>

    Mozilla documentation for detailed info:
    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search