js怎样改变元素的内容、属性、样式？

一、改变元素内容

1. 使用 textContent 属性：
   • textContent 可以设置或获取元素及其后代的文本内容。
   • 例如

     const element = document.getElementById('myElement');
     element.textContent = 'New text content';

1. 使用 innerHTML 属性：
   • innerHTML 可以设置或获取元素的 HTML 内容。
   • 例如：

     const element = document.getElementById('myElement');
     element.innerHTML = '<p>New HTML content</p>';

二、改变元素属性

1. 使用 setAttribute 方法：
   • 可以通过这个方法设置元素的特定属性。
   • 例如，设置一个元素的 src 属性：

     const img = document.getElementById('myImage');
     img.setAttribute('src', 'new-image.jpg');

1. 直接访问属性：
   • 可以直接通过元素对象的属性名来设置属性值。
   • 例如：

     const input = document.getElementById('myInput');
     input.value = 'New input value';

三、改变元素样式

1. 使用 style 属性：
   • 可以直接通过元素对象的 style 属性来设置 CSS 样式。
   • 例如：

     const element = document.getElementById('myElement');
     element.style.color = 'red';
     element.style.backgroundColor = 'blue';

1. 使用 classList 属性：
   • classList 可以操作元素的类名，方便地添加、移除或切换类。
   • 例如：

     const element = document.getElementById('myElement');
     element.classList.add('new-class');
     element.classList.remove('old-class');
     element.classList.toggle('active-class');

• 然后在 CSS 中定义相应的类来设置样式

1. 使用 setAttribute 设置 style 属性：
   • 可以通过 setAttribute 方法设置 style 属性的整个字符串值。
   • 例如：

     const element = document.getElementById('myElement');
     element.setAttribute('style', 'color: red; background-color: blue;');