时间戳

首页 > 解决方案 > 使用javascript减去css左值

javascript - 使用javascript减去css左值

问题描述

我不得不寻找问题的答案，但找不到解决方案。我找到了一些解决方案，但他们使用的是 px，而不是更难做的事情。我想减去 50% 的 CSS 左值百分比。

JS：

document.addEventListener("keydown", function (e) {
    if(e.keyCode == 37){
    console.log("left")
    $('.fa-circle').css('left','-=3%' )
    }
}

CSS：

.fa-circle{
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 30px;
    transition: all .3s;
}

对于每个向下键（左箭头），应减去圆圈的左侧位置。

例如，第一次点击 = 左：47%；第二次点击=左：44；第三次点击 = 左：41%...

标签： javascriptcss

解决方案

您必须解析出当前值，然后在将其放回之前减去 3：

document.addEventListener("keydown", function (e) {
    if(e.keyCode == 37){
      console.log("left")
      const currentLeft = parseInt($('.fa-circle').css('left'));
      $('.fa-circle').css('left', (currentLeft - 3) + '%' );
    }
}

编辑：正如评论中的 OP 所指出的，这不能按预期工作 - 因为 jQuery.css('left')以像素为单位返回值，即使它被明确设置为百分比。jQuery 不提供执行此操作的内置方法 - 参见例如。在这里。

这些答案的一个建议是手动计算百分比，但乘以const currentLeft = 100*(parseInt($('.fa-circle').css('left'))/($("body").width()));. 在实践中，您可以用"body"选择器替换最近定位的父元素。

推荐阅读