What is the reason why the JS console output is blank and the style modification is invalid? How to solve it?

Troubleshooting and solving the failure of JavaScript console output blanks and style modification

In JavaScript code, if you try to modify top attribute value of an element, the console output is blank and the modification is invalid, usually because of the wrong way of accessing and modifying the element style. The problem may be that you use element.style.top directly to manipulate the styles defined in the CSS stylesheet. element.style.top only acts on the inline style of the element, and cannot modify styles set through external stylesheets or internal stylesheets.

For example, if the top attribute of the .sidebar_right ul element is defined through a CSS stylesheet, sidebarright.style.top will return an empty string. To modify the style correctly, it is recommended to use the following two methods:

Method 1: Use window.getComputedStyle() to get the calculated style

window.getComputedStyle() method can get the final calculated style of the element, including inline styles, external style sheets, and styles in the internal style sheets. We can use it to get top value of the element and then modify it:

 const sidebarright = document.querySelector('.sidebar_right ul');
const closebtn = document.getElementById('closebtn'); //Make sure closebtn is defined closebtn.onclick = function() {
  // ...Other codes...
  const computedStyle = window.getComputedStyle(sidebarright);
  let topValue = parseInt(computedStyle.getPropertyValue('top'), 10); //Convert the string to a number and specify 10 as the radix let newTop = topValue - 80;
  sidebarright.style.top = `${newTop}px`;
};

This code first uses getComputedStyle() to get the top attribute value of the sidebarright element, convert it into a number, calculate the new top value, and finally assign it to style.top attribute of the element.

Method 2: Use CSS class name to control style

A more concise and elegant way is to define a new class in the CSS style sheet, such as .moved , to represent the state after movement:

 .moved {
  top: 180px; /* or other required value*/
}

Then in JavaScript code, control the style of the element by adding or removing the class name:

 const sideBarRight = document.querySelector('.sideBar_right ul');
const closeBtn = document.getElementById('closeBtn'); //Make sure closeBtn is defined closeBtn.onclick = function() {
  // ...Other codes...
  sideBarRight.classList.add('moved');
};

This method manages styles through CSS class names, making it easier to maintain and extend.

Important tip: Make sure that variables such as topAd , locationItem , myJD , closebtn , closeBtn and other variables are correctly defined and initialized within the scope of the onclick function. The naming of variables in the code is inconsistent, and it is recommended to unify the naming specification. Use const or let to declare variables to improve code readability and maintainability. Use the template literal ${} to build strings to make the code more concise. Add an error handling mechanism, such as checking whether an element exists.

The above is the detailed content of What is the reason why the JS console output is blank and the style modification is invalid? How to solve it?. For more information, please follow other related articles on the PHP Chinese website!