我是 JS 的新手,我想知道如何使用 JS 添加样式,例如...
document.getElementById("id").style.transform = "translateX(50%)";
...但不会与我在 css 中编写的样式重叠。
这是我的例子。 CSS:
#falling-block {
margin-top: 21px;
}
@keyframes falling {
from {
transform: translateY(0%);
margin-bottom: 0;
}
to {
transform: translateY(1250%);
margin-bottom: 0;
}
}
这是我的 JS:
const ranCol = Math.floor(Math.random()*3);
const fallingBlock = document.getElementById('falling-block');
if (ranCol==0) {
fallingBlock.style.transform = 'translateX(-28%)';
} else if (ranCol==1) {
fallingBlock.style.transform = 'translateX(0%)';
} else if (ranCol==2) {
fallingBlock.style.transform = 'translateX(28%)';
}
fallingBlock.style.animation = 'falling 4s linear infinite';
所以它改变了 JS 中的转换,但我仍然想要已经写好的转换。我可以只添加 translateY 并保留 translateX 吗?谢谢!
最佳答案
任何时候,如果你想计算应用于元素的样式,你可以使用:
让 myElementCurrentPropertyValue = window.getComputedStyle(myElement).getPropertyValue(myProperty);
在这种情况下,由于您想知道 transform
属性的值,您可以使用:
let myDivTransform = window.getComputedStyle(myDiv).getPropertyValue('transform');
一旦您拥有该计算属性值,您就可以使用 myElement.style.setProperty(property, value)
修改它:
myDiv.style.setProperty('transform', myDivTransform + ' skew(20deg, 20deg)');
工作示例:
// GRAB DOM ELEMENTS
const myDiv = document.querySelector('div');
const buttonGroup = document.querySelector('.buttonGroup');
// APPLY INITIAL CSS TRANSFORM VALUE TO MYDIV
setTimeout(() => {myDiv.classList.add('changeRotation');}, 300);
// applyDirective() FUNCTION
const applyDirective = (e) => {
let myDivTransform = window.getComputedStyle(myDiv).getPropertyValue('transform');
switch (e.target.dataset.directive) {
case ('deepen') : myDiv.style.setProperty('transform', myDivTransform + ' skew(-20deg, -20deg)'); break;
case ('flatten') : myDiv.style.setProperty('transform', myDivTransform + ' skew(20deg, 20deg)'); break;
case ('grow') : myDiv.style.setProperty('transform', myDivTransform + ' scale(2.5)'); break;
case ('shrink') : myDiv.style.setProperty('transform', myDivTransform + ' scale(0.4)'); break;
case ('moveRight') : myDiv.style.setProperty('transform', myDivTransform + ' translate(60px, 60px)'); break;
case ('moveLeft') : myDiv.style.setProperty('transform', myDivTransform + ' translate(-60px, -60px)'); break;
}
}
// ADD EVENT LISTENER
buttonGroup.addEventListener('click', applyDirective, false);
div {
width: 60px;
height: 60px;
margin: 24px auto 36px;
background-color: rgb(255, 0, 0);
vertical-align: middle;
transition: transform 1.2s linear;
}
div.changeRotation {
transform: rotate(315deg);
}
.buttonGroup {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
}
button {
flex: 0 0 25%;
margin: 12px calc(25% / 6);
}
<div></div>
<aside class="buttonGroup">
<button type="button" data-directive="deepen">Deepen</button>
<button type="button" data-directive="grow">Grow</button>
<button type="button" data-directive="moveRight">Move Right</button>
<button type="button" data-directive="flatten">Flatten</button>
<button type="button" data-directive="shrink">Shrink</button>
<button type="button" data-directive="moveLeft">Move Left</button>
</aside>
进一步阅读:
关于javascript - 如何在不与旧样式重叠的情况下使用 JS 添加样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69850850/