JavaScript：为div选择一个元素并更新样式

Question

I need to add styling to a DIV element using JavaScript. I have the following DIV in my document:

<div class="RnEpo Yx5HN   " role="presentation">

The script that I have tried is:

WebElement = document.querySelectorAll("div[class='RnEpo Yx5HN ']");
WebElement.style='height: 10000px;'
WebElement.setAttribute("height = 1000px;");

I want to achieve the same styling as this CSS:

.RnEpo Yx5HN   
{
    height: 100000px;
}

Answer 1

To achieve what you require, first replace querySelectorAll() with querySelector() seeing that your only need to select the first matching element .

Consider also revising your selector from div[class='RnEpo Yx5HN '] to a more robust selector in the form of div.RnEpo.Yx5HN which is to say:

Select div elements that have classes any ordering of class RnEpo and Yx5HN

Lastly, revise the way that you're applying the inline style so that the height attribute is directly specified on the WebElement style object.

These changes make the call to setAttribute() redundant. Note also that; setAttribute() takes two arguments , and the DIV element does not have a native height attribute.

Here's a working snippet showing this in action:

 /* Use querySelector() to select first matching element and use dot notation syntax to select div with both classes */ const WebElement = document.querySelector("div.RnEpo.Yx5HN"); /* Apply inline style, avoid invalid setAttribute call */ WebElement.style.height = `10000px;' 

 <div class="RnEpo Yx5HN" role="presentation">