Исправить простую ошибку в JS/jQuery

267

11 сентября 2017, 04:42

var num = 20;
$('.class').css('transform', 'translateX(num * 2px));

Как сделать так, чтоб в class записалось уже готовое свойство:

transform: translateX(40px);

Answer 1

var num = 20;
$('.class').css('transform', 'translateX(' + (num * 2) + 'px)');

Answer 2

Вы бы могли описывать трансформацию чем-то похожим на 'transform', 'translateX(num * 2px)', если бы num * 2px являлось функцией css3, и только, если бы переменная num объявлялась непосредственно в css.

Т.к. num является переменной javascript, то ее, как и оператор умножения, нужно отделять кавычками:

var num = 20; 
 
$('.class').css('transform', 'translateX(' + (num * 2) + 'px)');

html { 
  height: 100%; 
  padding: 5px; 
} 
 
body { 
  padding: 0px; 
  margin: 0px; 
  height: 100%; 
  border: #ccc solid 1px; 
} 
 
* { 
  box-sizing: border-box; 
} 
 
.class { 
  width: 100px; 
  height: 50px; 
  background: #000; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="class"></div>

Вариант с css переменными + функция calc()

$('.class').css('transform', 'translateX(calc(var(--num)*2))');

:root { 
  --num: 20px; 
} 
 
html { 
  height: 100%; 
  padding: 5px; 
} 
 
body { 
  padding: 0px; 
  margin: 0px; 
  height: 100%; 
  border: #ccc solid 1px; 
} 
 
* { 
  box-sizing: border-box; 
} 
 
.class { 
  width: 100px; 
  height: 50px; 
  background: #000; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="class"></div>

Поддержка браузерами css переменных - тут. Поддержка браузерами функции calc() - тут.

Answer 3

var num = 20; 
 
$('.class').css('transform', 'translateX('+(num * 2)+'px)');

.class { 
width:50px; 
height:50px; 
background:#f1f1f1; 
box-shadow:0 0 10px rgba(0,0,0,0.5); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="class"></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как в одном запросе получить количество записей по параметрам из разных таблиц?

У меня есть 3 таблицыПервая таблица это: packs_global_cats В ней есть 3 глобальные категории

271

Java

Как растягивать GridBagLayout как это делает BorderLayout и GridLayout?

Есть таблица из связки JLabel/JButton и JText, с помощью Grid'a задал им нужные пропорции, но при растяжении окна размеры (масштаб) компонентов не меняетсяКак...

319

Java

Сохранение через FileChooser

Всем добрый день, я хочу чтобы пользователь выбирал где сохранять файл сам через FileChooser в JavaFX, но когда он выбирает директорию например D:\File\...

319

Java

Передача данных из базы SQLite в Recyclerview

Всем приветС sqlite работаю недавно

254