我正在使用 Reactjs,我想获取 img 元素的高度,我想保持 img 的比例,所以我在 css 中像这样设置图像。
.img {
position: fixed;
z-index: 999;
width: 30%;
height: auto;
left: 5%;
object-fit: fill;
}
请注意这里的高度是“auto”。
现在我只是想像这样在 componentDidMount() 中获取它的渲染高度:
componentDidMount() {
const height = document.getElementById('ImgID').clientHeight;
const width = document.getElementById('ImgID').clientWidth;
console.log(height, width)
}
我检查只是在控制台中打印结果,但日志显示高度为 0,宽度为 252(显式宽度)。
事实是图像出现在屏幕上并且它的高度在视觉上不为 0。然后我尝试通过打印手动检查属性“clientHeight”:
console.log(document.getElementById('ImgID').attributes)
通过展开“style > ownerElement > clientHeight”,我看到客户端高度为 49,这不是零,但我无法获得正确的值:/。
我正在寻找一种解决方案来获得这种情况下的高度,它可以通过 Javascript/css 或两者来实现。我尽量避免使用 JQuery,因为 React 使用的是虚拟 DOM,而不是浏览器 DOM。
----------------更新--------------------
这是我从 @ııı 的回答中得到的 getBoundingClientRect() 的结果
最佳答案
这实际上是因为componentDidMount()
时图片还没有加载。执行。 <img>
在 DOM 中,但是 height
在图像加载之前是未知的(除非从 CSS 明确设置)。解决方法是在onLoad
中查询高度.请参见下面的测试:
class Test extends React.Component {
componentDidMount() {
//console.log(this.refs.img.getBoundingClientRect().height);
console.log('componentDidMount', this.refs.img.clientHeight);
}
imageLoaded = () => {
console.log('imageLoaded', this.refs.img.clientHeight);
}
render() {
return <img src="http://placekitten.com/200/200"
ref="img"
onLoad={this.imageLoaded}
/>;
}
}
ReactDOM.render(<Test />, document.getElementById('app'));
<script src="http://unpkg.com/react/umd/react.production.min.js"></script>
<script src="http://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<div id="app"></div>
关于javascript - 如何获取在 reactjs 中将 height css 属性设置为 auto 的元素的确切高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54752137/