JavaScript改变HTML元素的样式改变CSS及元素属性

JavaScript可以用来操作HTML元素，这包括改变元素的样式以及元素的属性。我们可以使用JavaScript来动态地改变网页的展示效果和交互性。下面是改变HTML元素的样式和属性的完整攻略。

改变HTML元素的样式

通过JavaScript设置CSS样式

可以使用JavaScript代码来操控CSS样式，以改变HTML元素的外观和表现。JavaScript有一个style属性，可以通过该属性来访问HTML元素的CSS样式。我们可以直接设置或改变CSS属性值。

下面是设置HTML元素背景颜色的示例：

document.getElementById('myElement').style.backgroundColor = 'red';

这个代码将通过获取id为myElement的HTML元素，并将其背景颜色更改为红色。

通过添加/删除CSS类来改变样式

除了直接操纵CSS样式，我们也可以通过添加/删除CSS类来改变HTML元素的样式。在CSS文件中，可以将一些样式定义成类名，然后在JavaScript中通过添加或删除CSS类来改变样式。

下面是通过添加CSS类来改变HTML元素样式的示例：

<style>
  .chosen {
    background-color: yellow;
    font-weight: bold;
  }
</style>
<button id="myBtn">按钮</button>
<script>
  document.getElementById('myBtn').addEventListener('click', function() {
    this.classList.add('chosen');
  });
</script>

当用户点击按钮时，将会在按钮上添加一个名为chosen的CSS类，从而将按钮的背景颜色更改为黄色、字体加粗。

改变HTML元素的属性

通过JavaScript来动态生成HTML

可以使用JavaScript来动态生成HTML元素，并通过设置元素属性来控制元素的样式，如元素的class、id、data-*等。

下面是通过JavaScript来动态生成HTML元素示例:

// 创建一个新的DOM元素
var newParagraph = document.createElement('p');

// 设置元素属性
newParagraph.id = 'myParagraph';
newParagraph.textContent = '这是一段新的段落';

// 插入到文档中
document.body.appendChild(newParagraph);

这段代码将创建一个名为myParagraph的新段落元素，并将其添加到文档的末尾。注意到，我们可以通过textContent属性来设置元素的文本内容。

通过JavaScript操纵HTML元素的属性

通过JavaScript，我们也可以直接操纵已有元素的属性。

下面是修改元素属性的示例:

<input type="text" id=" myInput" value="默认值">
<button onclick="myFunction()">点击我</button>
<script>
  function myFunction() {
    document.getElementById('myInput').value= '新的值';
  }
</script>

在这个例子中，通过点击按钮来改变文本输入框的值。当按钮被点击后，元素的value属性将会变为新的值。

总结

以上是使用JavaScript来改变HTML元素样式和属性的攻略。我们可以使用JavaScript来动态地改变网页的展示效果和交互性。