Question

$('. element').css ({
    'transform' : 'translate(blah blah);'
});

与我知道如何使用JavaScript更改CSS的唯一方式相比，我喜欢这种方式的组织方式。

Element.style.color='red';

我对JavaScript还是很陌生，所以除了非常基本的东西外，我从未做过太多更改CSS的事情。我只想知道您将如何使用普通JavaScript编写上述jQuery

谢谢

Answer 1

您可以尝试以下方法：

document.getElementsByClassName('element').style.transform = 'translate(blah blah)';

或者这个：

document.querySelector(".element").style.transform = "translate(blah blah)";

请尝试以下示例，而不是第一个元素：

document.querySelectorAll('.element').forEach(function(event, index){  
  if(index === 2){
    event.style.transform = 'translate(-80%, -80%)';
  }
});

#wrapper{
  position: relative;
  width: 100%;
  float: left;
  height: 100px;
}
#wrapper .element{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  text-align: center;
}

<div id="wrapper">
  <div class="element">First Line</div>
  <div class="element">Second Line</div>
  <div class="element">Third Line</div>
  <div class="element">Fourth Line</div>
  <div class="element">Fifth Line</div>
</div>

Answer 2

您可以使用querySelector选择具有类别的第一项：

document.querySelector(".myClass").style.transform = "rotate(0.5turn)";

<div class="myClass">
  Hello
</div>

其他选择是getElementsByClassName，它将返回元素数组。

Answer 3

尝试一下。

document.getElementById("mainbar").style.transform = "scale(2)"

Answer 4

您可以使用：

Element.style.transform = "translate(amount, amount)";

Answer 5

在javascript中，与jQuery中的$(selektor)等效的函数是document.querySelector(selektor)或document.querySelectorAll(selektor)，它取决于您要引用的元素的预期数量。因此，您的代码可以这样写：document.querySelector('.element').transform = 'translate(blah, blah)';-如果您只想将此规则应用于具有特定类的一个元素。如果要将此规则应用于多个元素，则必须使用querySelectorAll，在所有元素中进行ale循环。看起来像是：var myElements = document.querySelectorAll('.element'); for(var i = 0; i < myElements.length; i++){ myElements[i].style.transform = 'translate(blah, blah)';}

Answer 6

要在Javascript中进行等效操作，您应该确保将其应用于所有具有类名的元素，就像在jQuery中一样。为此，您必须遍历所有元素，请参见下面的第二个示例。

这里有两个简单的示例可以满足您的需求：

// One/first element with classname
let element = document.querySelector('.element');
element.style.color = 'red';

// Multiple elements with same classname
let elements = document.querySelectorAll('.element');
elements.forEach(element => {
  element.style.color = 'red';
  element.style.transform = 'translate(blah blah)';
})

Answer 7

由于您尝试使用类设置样式，因此可以使用querySelectorAll()遍历所有元素，以分别设置每个元素的transform属性：

document.querySelectorAll('.element').forEach(function(el){
  el.style.transform = 'translate(10px, 50px)';
});

.element{
  width: 80px;
  height: 40px;
  background-color: skyblue;
}

<div class="element">Container</div>

这个jQuery的JavaScript相当于什么？

7 个答案: