如何解决使用 JavaScript 修改 CSS 属性而不替换旧的
我正在尝试创建一个根据鼠标坐标移动的 HTML 元素。我正在使用 'mousemove' 事件并移动我的元素,我使用了 offsetX/Y 事件的属性。
例如,如果我只应用水平移动(所以我只使用 offsetX),它会起作用。但是当我应用垂直移动时,它将不再起作用。我使用了'transform' CSS 属性,我知道问题出在哪里,但我不知道如何解决它。这是因为我应用了一个新属性来垂直移动,然后我删除了让元素水平移动的旧属性。
那么您知道如何向一个元素添加多个 CSS 属性(相同)吗? 我试图将它们与“+”或同一个``一起添加,但它不起作用。
我希望我说的很清楚,对不起我的英语:)
预先感谢您的帮助:)
我的代码:
let box = document.querySelector('.box');
let x = document.querySelector('#x');
let y = document.querySelector('#y');
let area = document.querySelector('.area');
area.addEventListener('mousemove',(e) => {
x.innerHTML = e.offsetX;
y.innerHTML = e.offsetY;
box.style.transform = `translateX(${e.offsetX}px)`;
box.style.transform = `translateY(${e.offsetY}px)`;
});
.area {
width: 1000px;
height: 400px;
margin: auto;
border: 3px dashed red;
}
.box {
width: 100px;
height: 100px;
border: 3px solid black;
}
<div class="area">
<div class="box"></div>
<p>X : <span id="x"></span></p>
<p>Y : <span id="y"></span></p>
</div>
解决方法
transform
属性的值是一个转换列表。所以在同一个作业中同时设置 transformX
和 transformY
。
let box = document.querySelector('.box');
let x = document.querySelector('#x');
let y = document.querySelector('#y');
let area = document.querySelector('.area');
area.addEventListener('mousemove',(e) => {
x.innerHTML = e.offsetX;
y.innerHTML = e.offsetY;
box.style.transform = `translateX(${e.offsetX}px) translateY(${e.offsetY}px)`;
});
.area {
width: 1000px;
height: 400px;
margin: auto;
border: 3px dashed red;
}
.box {
width: 100px;
height: 100px;
border: 3px solid black;
}
<div class="area">
<div class="box"></div>
<p>X : <span id="x"></span></p>
<p>Y : <span id="y"></span></p>
</div>
它不起作用,因为您覆盖了 translateX 样式。
box.style.transform = `translate(${e.offsetX}px,${e.offsetY}px)`;
解决您的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。