为什么我无法访问 javaScript 中的 css 样式属性？
[英]why I ain't able to access css style property in javaScript if condition?
问题描述
I am just trying to print hello world in console by putting condition.
我只是想通过放置条件在控制台中打印 hello world。 It is not working, I don't know why.它不起作用，我不知道为什么。 It is work properly outside of condition.它在条件之外正常工作。 But when I try to print message only if translateX is equal to 0px of item4 id.但是，当我尝试仅在 translateX 等于 item4 id 的 0px 时打印消息时。 If you know the reason, Please help me out.如果您知道原因，请帮助我。
My code here:我的代码在这里：
item4 = document.getElementsByClassName('items')[3] function leftarrow() { // not working if (item4.style.transform == 'translateX(0px)') { console.log("Hellow World") } }
.items{ border: 2px solid red; text-align: center; width: 300px; height: 300px; position: absolute; background-color: yellow; transform: translateX(0px); }.contains{ border: 2px solid black; width: 310px; height: 310px; } #btn{ width: 100px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Slider</title> </head> <body> <div id="screen" class="container"> <div id="main-div"> <button id="btn" onclick="leftarrow()"> print </button> <div class="contains"> <div id="item1" class="items">ItemBox 1</div> <div id="item2" class="items">ItemBox 2</div> <div id="item3" class="items">ItemBox 3</div> <div id="item4" class="items">ItemBox 4</div> </div> </div> </div> </body> <script src="index.js"></script> </html>
1 个解决方案
解决方案1
0 2021-12-02 13:46:56
You can use getComputedStyle to get the transform matrix values (for example: "matrix(1, 0, 0, 1, 20, 0)" ).您可以使用getComputedStyle获取transform matrix值（例如： "matrix(1, 0, 0, 1, 20, 0)" ）。 Split it up and clean it so you only get the values.拆分并清理它，以便您只获得值。 Then check if the value for x (second last value [onlyVals.length - 2] ) is equal to a specified value.然后检查x的值（倒数第二个值[onlyVals.length - 2] ）是否等于指定值。
item4 = document.getElementsByClassName('items')[3] function leftarrow() { const transformMatrixVals = getComputedStyle(item4).transform.split(","); const onlyVals = transformMatrixVals.map(v => v.replace(/\D/g, "")); const xVal = onlyVals[onlyVals.length - 2]; // 20 if (xVal === "20") { console.log("Hello World"); } } leftarrow();
.items{ border: 2px solid red; text-align: center; width: 300px; height: 300px; position: absolute; background-color: yellow; transform: translateX(20px); }
<div id="item1" class="items">ItemBox 1</div> <div id="item2" class="items">ItemBox 2</div> <div id="item3" class="items">ItemBox 3</div> <div id="item4" class="items">ItemBox 4</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.