Можете ли вы изменить css с помощью функции щелчка?

Question

Я делаю игру в стиле линкора и пытаюсь поработать над движением кораблей на столе. Моя идея заключается в том, что вы можете перетаскивать корабли на стол, и когда вы нажимаете на корабль, он меняется с вертикального на горизонтальное положение или наоборот. Каждый корабль имеет css с двумя основными частями: шириной и высотой. Можно ли сделать так, чтобы ширина и высота кораблей css менялись местами, когда я нажимал на корабль?

Answer 1

К сожалению, я не слишком уверен, чего вы пытаетесь достичь. Вы пытаетесь поменять местами корабли с вертикали на горизонтали или же поменяете ширину и высоту друг с другом.

Если вы пытаетесь повернуть корабль, вы можете сделать это следующим образом:

С помощью css и js вы можете вращать корабли следующим образом:

html

<div id="MyID" onclick="ChangeClass()"></div>

js

function ChangeClass() {

var MyVar= document.getElementById("MyID")

MyVar.className="MyClass"

}

css

.MyClass{
/* rotates the class. webkit = chrome,safari ms = edge, moz = firefox, o = opera*/
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

вы можете изменить ID и классы на ваши нужные имена.

Answer 2

С помощью javascript вы можете изменить CSS ширину, используя:

var el = document.querySelector("#yourObjectID");
el.style.width = "100px";

Чтобы изменить высоту:

el.style.height = "100px";

Чтобы поменять высоту и ширину, которые вы можете использовать дополнительная переменная, как если бы вы меняли любые другие переменные.

Если вы используете прослушиватель щелчков, вы можете использовать this вместо создания переменной el и выбора элемента с помощью селектора запросов.

document.querySelector("#ship1").addEventListener('click', function(){
  var newHeight = this.style.width;
  this.style.width = this.style.height;
  this.style.height = newHeight;
}, false);

.ship {
  background: gray;
  cursor: pointer;
 }

<div id="ship1" class="ship" style="width: 100px; height: 50px;"></div>