这个jQuery的JavaScript等价于什么？

Question

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

I like how this is organized compared to the only way I know how to change css with JavaScript.

Element.style.color='red';

I'm very new to JavaScript so I've never done much with changing css other than very basic stuff. I just want to know how you'd write the above jQuery in vanilla JavaScript

Thank you

Answer 1

You can try this:

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

Or this:

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

Try below example for the elements other than the first:

 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

You can use querySelector to select the first item with a class:

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

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

Other alternative is getElementsByClassName which will return an array of elements.

Answer 3

尝试这个。

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

Answer 4

您可以使用以下方法进行jQuery等效：

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

Answer 5

In javascript the equivalent function, to $(selektor) in jQuery, is document.querySelector(selektor) or document.querySelectorAll(selektor) , it depends of the expected number of elements that you want to refer. So Your code can be writen like this: document.querySelector('.element').transform = 'translate(blah, blah)'; - in case that you want to apply this rule only to the one element with certain class. If You want to apply this rule to the multiple elements, then you have to use querySelectorAll , ale loop through all the elements. So it would look like: var myElements = document.querySelectorAll('.element'); for(var i = 0; i < myElements.length; i++){ myElements[i].style.transform = 'translate(blah, blah)';} var myElements = document.querySelectorAll('.element'); for(var i = 0; i < myElements.length; i++){ myElements[i].style.transform = 'translate(blah, blah)';}

Answer 6

To do the equivalent in Javascript you should probably ensure that it applies to all elements with the classname, just like it would in jQuery. To do that you will have to loop through all the elements, see the second example below.

Here are two simple examples which should cover your needs:

// 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

Since you are trying to set the style with class, you can use querySelectorAll() to loop through all the elements to set the transform property on each element individually:

 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>