答案：通过JavaScript可动态修改HTML元素的样式、属性和内容。使用style属性或classList操作样式，setAttribute或直接访问修改属性，textContent和innerHTML更新内容，结合选择器实现交互效果。
在HTML中，直接写在代码里的元素是静态的，如果想让页面根据用户操作或程序逻辑发生变化，就需要使用JavaScript来动态修改HTML元素的样式和属性。以下是几种常用方法。
修改元素的样式（CSS）
通过JavaScript可以动态改变元素的外观，比如颜色、大小、位置等。
1. 使用 style 属性直接设置内联样式：获取元素后，用 element.style.property 修改样式。例如：
document.getElementById("myDiv").style.color = "red";
document.getElementById("myDiv").style.fontSize = "20px";
document.getElementById("myDiv").style.display = "none";
注意：CSS属性名需转为驼峰命名法，如 background-color 变成 backgroundColor。
2. 修改 class 来批量控制样式：
更推荐的方式是预先在CSS中定义好类，然后通过JavaScript切换class。
立即学习“前端免费学习笔记（深入）”；
document.getElementById("myDiv").className = "highlight";
或者使用 classList 方法更灵活：
document.getElementById("myDiv").classList.add("highlight");
document.getElementById("myDiv").classList.remove("normal");
document.getElementById("myDiv").classList.toggle("visible");
修改元素的属性
HTML元素的属性如 id、src、href、disabled 等都可以通过JavaScript修改。
let img = document.getElementById("myImg");
img.setAttribute("src", "new-image.jpg");
img.setAttribute("alt", "新图片");
读取属性：
let link = document.getElementById("myLink");
console.log(link.getAttribute("href"));
2. 直接访问特定属性：
部分常用属性可以直接访问，更简洁：
document.getElementById("myInput").value = "新值";
document.getElementById("myCheckbox").checked = true;
document.getElementById("myButton").disabled = false;
修改元素内容
除了样式和属性，还可以动态更新元素内部的文本或HTML内容。
1. textContent：只修改文本内容，避免XSS风险：document.getElementById("title").textContent = "新的标题";
2. innerHTML：可插入HTML标签：
document.getElementById("content").innerHTML = "<p>这是一段<strong>加粗</strong>文字</p>";
注意：使用 innerHTML 要小心，不要插入用户输入的未过滤内容，以防安全问题。
基本上就这些。通过结合选择器（如 getElementById、querySelector）和上述方法，就能实现丰富的动态效果。不复杂但容易忽略细节，比如属性命名和安全处理。 
