Как сделать изменение параметра translate при нажатии кнопки?
function right2_m() { const ml = document.getElementById("box") let left = ml.style.transform left = left.split(',', 2) left[0] = Number(left[0].replace(/D/g,'')); left[1] = Number(left[1].replace(/D/g,'')); //console.log("вправо" + left[0] + " x " + left[1]) let new_x = left[0] + 30; ml.style.transform = 'translate(' + new_x + 'px,' + left[1] + 'px)' } function bottom2_m() { const m2 = document.getElementById("box") let left2 = m2.style.transform left2 = left2.split(',', 2) left2[0] = Number(left2[0].replace(/D/g,'')); left2[1] = Number(left2[1].replace(/D/g,'')); //console.log("влево" + left2[0] + " x " + left2[1]) let new_y = left2[1] + 30; m2.style.transform = 'translate(' + left2[1] + 'px,' + new_y + 'px)' } |
function right2_m() { const ml = document.getElementById("box") let left = ml.style.transform left = left.split(',', 2) left[0] = Number(left[0].replace(/D/g,'')); left[1] = Number(left[1].replace(/D/g,'')); //console.log("вправо" + left[0] + " x " + left[1]) let new_x = left[0] + 30; ml.style.transform = 'translate(' + new_x + 'px,' + left[1] + 'px)' } function bottom2_m() { const m2 = document.getElementById("box") let left2 = m2.style.transform left2 = left2.split(',', 2) left2[0] = Number(left2[0].replace(/D/g,'')); left2[1] = Number(left2[1].replace(/D/g,'')); //console.log("влево" + left2[0] + " x " + left2[1]) let new_y = left2[1] + 30; m2.style.transform = 'translate(' + left2[1] + 'px,' + new_y + 'px)' }
Весь код выложить не получилось, ссылка https://disk.yandex.ru/d/QQ82r_r_VDCZnA
Дополнительно:
Molder84 Используйте JSFiddle / CodePen для удобства.
<div id="box"> </div> <button class ="but">hello</button> |
<div id="box"> </div> <button class ="but">hello</button>
#box{ border: 1px solid black; width: 300px; height: 200px; transform: translate(100px, 30px) } |
#box{ border: 1px solid black; width: 300px; height: 200px; transform: translate(100px, 30px) }
function bottom2_m() { const m2 = document.querySelector('#box') let left2 = window.getComputedStyle(m2).transform left2 = left2.split(',')//['matrix(1, 0, 0, 1, 100, 30)'] left2 = [Number(left2[4]), Number(left2[5].slice(0, -1))] console.log(left2, 'hello') let new_y = left2[1] + 30; m2.style.transform = 'translate(' + left2[1] + 'px,' + new_y + 'px)' } button = document.querySelector('.but') button.addEventListener( 'click', bottom2_m ) |
function bottom2_m() { const m2 = document.querySelector('#box') let left2 = window.getComputedStyle(m2).transform left2 = left2.split(',')//['matrix(1, 0, 0, 1, 100, 30)'] left2 = [Number(left2[4]), Number(left2[5].slice(0, -1))] console.log(left2, 'hello') let new_y = left2[1] + 30; m2.style.transform = 'translate(' + left2[1] + 'px,' + new_y + 'px)' } button = document.querySelector('.but') button.addEventListener( 'click', bottom2_m )
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для изменения параметра "translate" при нажатии кнопки на веб-странице, вам необходимо использовать JavaScript. Ниже приведен пример кода, который позволит вам динамически изменять значение параметра "translate" при нажатии кнопки на странице.
Прежде всего, у вас должна быть кнопка и элемент, к которому вы хотите применить изменение параметра "translate". Например, у вас есть кнопка с id "translateButton" и элемент с id "elementToTranslate".
```html
```
Затем вам нужно добавить JavaScript код, который будет обрабатывать нажатие кнопки и изменять значение параметра "translate" у элемента.
```html
document.getElementById("translateButton").addEventListener("click", function() {
var element = document.getElementById("elementToTranslate");
if (element.getAttribute("translate") === "yes") {
element.setAttribute("translate", "no");
} else {
element.setAttribute("translate", "yes");
}
});
```
Этот код добавляет обработчик события "click" к кнопке с id "translateButton". При каждом нажатии кнопки код проверяет текущее значение параметра "translate" у элемента с id "elementToTranslate" и изменяет его на противоположное значение (если "yes", то меняет на "no", и наоборот).
Таким образом, при нажатии кнопки "Изменить параметр translate" значение параметра "translate" у элемента будет меняться с "yes" на "no" и обратно. Надеюсь, это поможет вам решить вашу проблему! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.