Question

我想用转换属性将div 136px移动到右边，所以我写道： `

$('.search-input').on('typeahead:render', function (ev, suggestions, flag, dataset) {
  if ($('.num-results').length) {
    var moreCount = this.resultsCount - $('.tt-suggestion').length;

    $('.num-results').text(moreCount);
    if (moreCount > 0) {
      $('.more').removeClass('hidden');
    } else {
      $('.more').addClass('hidden');
    }
  }
}.bind(this))

和the_div类包含

$(".the_div").css({"transform":"translate(136px,0px)"});

它工作但现在我想发送一个javascript变量而不是136px。那可能吗？我怎样才能做到这一点？像

这样的变量

.the_div
{
  transition-duration:2s;
}

我写了

var my_width = window.innerwidth * 0.1;

它显然没有用。你有想法将div的十分之一宽度移动到右边（使用transform属性）吗？

Answer 1

只需要在javascript " + my_width + "

中的字符串中使用连接变量

$(".the_div").css({"transform":"translate(" + my_width + "px,0px)"});

Answer 2

您也可以使用模板字符串在纯Javascript中执行此操作。（PS-您甚至不需要JQuery）

首先，将 div 保存在变量中

const theDiv = document.querySelector('.the_div');

第二，在变量中保存要翻译的值

let number = 136;

最后，设置div的 style 属性

theDiv.style.transform = `tranlate(${number}px,0)`;

希望这有助于回答您的问题

这是模板字符串的有用链接 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

将Javascript变量发送到.css（{transform：translate（var，var）}）

2 个答案: