gpt4 book ai didi

javascript - 如何在 Angular 中将变量传递给 css

转载 作者:太空宇宙 更新时间:2023-11-04 00:36:56 24 4
gpt4 key购买 nike

我正在运行 Angular 应用程序,我计算元素的宽度并将其存储在变量最终位置下,我想移动到左侧(最终位置)px。我希望此样式属性仅在悬停在元素上时应用。如何做到这一点?

component.ts


ngAfterViewChecked(): void {
this.finalposition = document.getElementById('spandiv').offsetWidth;
}

component.html


<input id="inputCustome" type="text">
<p id="spandiv">xyzkskssss</p>

组件.css

#inputCustomer {
text-align: center;
position: relative;
bottom: 7px;
left: 2px;
}


#spandiv {
position: absolute;
right:145px;
top: 40px;
background-color: #6B6664;
padding: 5px;
color:white;
font-weight: normal;
display: block;
opacity:0;
overflow: hidden;

}


#inputCustomer:hover + #spandiv {
position: absolute;
left: var(--finalPosition*2)+ "px"; // this value is not getting picked up
top:40px;
display: inline;
opacity:1;

}

最佳答案

您可以使用(mouseenter)(mouseleave) 来设置finalPosition 值。

尝试:

<input id="inputCustome" type="text" (mouseenter)="finalPosition = finalPosition * 2" (mouseleave) ="finalPosition = finalPosition /2">
<p id="spandiv" [style.left]="finalPosition + 'px'" >xyzkskssss</p>

<input id="inputCustome" type="text" (mouseenter)="finalPosition = finalPosition * 2" (mouseleave) ="finalPosition = finalPosition /2">
<p id="spandiv" [ngStyle]="{'left': finalPosition + 'px'}" >xyzkskssss</p>

Demo

关于javascript - 如何在 Angular 中将变量传递给 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59200492/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com