你能用点击功能改变css吗？

我正在做一个战舰风格的游戏，并试图在桌子上的船舶运动的工作。我的想法是，你可以将船只拖放到桌子上，当你点击船只时，它会从垂直位置变为水平位置或其他方式。每艘船都有一些css，有两个主要部分：宽度和高度。当我点击飞船时，是否可以使飞船的css宽度和高度交换

使用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=新高度；
}，假）
.ship{
背景：灰色；
光标：指针；
}
不幸的是，我不太确定你想要实现什么。你是想把船从垂直方向调换成水平方向，还是想把船的宽度和高度互相调换

如果您试图旋转船舶，您可以这样做：

使用css和js，您可以像这样旋转船舶：

html

css

您可以将ID和类更改为所需的名称。
是的，这是可能的。是的，您可以，是否要使用VueJs或JavaScript应用该名称？请分享您的代码片段，以便我们更方便地帮助您。
<div id="MyID" onclick="ChangeClass()"></div>

function ChangeClass() {

var MyVar= document.getElementById("MyID")

MyVar.className="MyClass"

}

.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);
}