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

Question

我正在制作一个战舰风格的游戏，并试图在桌子上的船的移动上工作。我的想法是，你可以将船拖放到桌子上，当你点击船时，它会从垂直位置变成水平位置或以其他方式改变。每艘船都有一些css，它有两个主要部分:宽度和高度。有没有可能让船的css宽度和高度在我点击该船时交换？

Answer 1

使用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>

​

Answer 2

不幸的是，我不太确定你想要实现什么。你是想把船从垂直方向换成水平方向，还是想把船的宽度和高度互相调换。

如果你想旋转轮船，你可以这样做：

使用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和类更改为所需的名称。