Как получить значение translate3d?
Подскажите, как получить значение tx из transform: translate3d(-490px, 0px, 0px); в переменную через класс?
Нужна просто цифра, без px. В данном случае это 490 Спасибо! |
|
Не понимаю что там искать, можно как то по подробнее? Я не большой знаток js
|
ethereal,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<style id=stv>
#el{
width: 100px;
height: 50vh;
}
.cl {
width: 300px;
height: 100em;
color: rgb(255,220,220);
--var1: 100px;
transform: translate3d(-490px, 0px, 0px);
}
</style>
</head>
<body>
<script>
let getStyle = (st, sel, name) => {
const rules = st.sheet.cssRules
for (let i=0; i<rules.length; i++) {
if (sel == rules[i].selectorText) {
return rules[i].style.getPropertyValue(name)
}
}
}
let st = document.getElementById('stv')
let [tx, ty, tz] = getStyle(st, '.cl', 'transform').match(/-*\d+(?=px)/g);
console.log(tx, ty, tz);
alert(tx);
</script>
</body>
</html>
|
Это мне не очень подходит, у меня такой код:
<div class="owl-stage" style="transform: translate3d(-980px, 0px, 0px); transition: all 0.25s ease 0s; width: 3030px;"> </div> Это слайдер, и значение translate3d меняется вместе с слайдом... Мне нужно получит новое значение каждый раз при смене слайда |
ethereal,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
</head>
<body>
<div class="owl-stage" style="transform: translate3d(-980px, 0px, 0px); transition: all 0.25s ease 0s; width: 3030px;">
</div>
<script>
let transform = document.querySelector('.owl-stage').style.transform;
let [tx, ty, tz] = transform.match(/-*\d+(?=px)/g);
console.log(tx, ty, tz);
alert(tx);
</script>
</body>
</html>
Цитата:
|
Это работает, спасибо!
|
| Часовой пояс GMT +3, время: 14:22. |