JavaScript 动态修改HTML CSS

2021-10-17 本文已影响0人微语博客

通过DOM（Document Object Model）文档对象模型，JavaScript 可访问 HTML 文档的所有元素，并且动态的操作HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找HTML元素

如果我们需要通过JavaScript操作HTML元素，通常我们要先查找HTML元素。

通过 id 找到 HTML 元素，最简单的查找方式，返回找到的元素，找不到则返回null。

var element = document.getElementById('myId');

通过标签名找到 HTML 元素，根据标签名查找HTML元素，返回的是 htmlcollection 类型对象。

var elements = document.getElementsByTagName('div');

通过类名找到 HTML 元素，根据class属性名称查找HTML元素，返回结果和getElementsByTagName

var elements = document.getElementsByClassName('my-class');

动态改变HTML内容

HTML DOM允许我们动态的改变HTML，这也是我们使用DOM模型的原因之一。

改变HTML内容，使用innerHTML属性可以改变HTML元素，使用innerText属性改变HTML显示的文本。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="myId" onclick="changeHTML()">点我改变我的内容</div>
  <script>
    function changeHTML(){
      var el = document.getElementById('myId');
      el.innerHTML = '<h1>改变之后的内容</h1>';
    }
  </script>
</body>
</html>

相比innerHTML来说，innerText只是显示改变的内容，而不会解析语法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="myId" onclick="changeText()">点我改变我的内容</div>
  <script>
    function changeText(){
      var el = document.getElementById('myId');
      el.innerText = '改变之后的内容';
    }
  </script>
</body>
</html>

改变HTML属性，改变HTML属性可以使用element.attribute=新属性值，或者element.setAttribute("class","类名");

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .my-class{
      font-size: 32px;
      color: red;
    }
  </style>
</head>
<body>
  <div id="myId" onclick="changeAttr()">点我改变我的class属性</div>
  <script>
    function changeAttr(){
      var el = document.getElementById('myId');
      el.className = 'my-class';
      //el.className = 'my-class my-class2';//这里也可以添加多个已定义的类，注意不要被覆盖
    }
  </script>
</body>
</html>

为了添加多个类名，又不被覆盖，可以使用element.classList.add('class')的方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .my-class{
      font-size: 32px;
      color: red;
    }
    .my-class2{
      background: #f0f;
    }
  </style>
</head>
<body>
  <div id="myId" onclick="changeAttr()">点我改变我的class属性</div>
  <script>
    function changeAttr(){
      var el = document.getElementById('myId');
      el.classList.add('my-class');
      el.classList.add('my-class2');//追加类名不会被覆盖
    }
  </script>
</body>
</html>

动态改变CSS样式

除了可以操作HTML属性和内容，DOM也可以操作CSS样式。

使用element.style.属性名 = '属性值'，或者element.setAttribute("style","样式");方式设置样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="myId" onclick="changeStyle()">点我改变我的样式属性</div>
  <script>
    function changeStyle(){
      var el = document.getElementById('myId');
      el.style.color = 'red';
      el.style.fontSize = '36px';//使用驼峰属性名
      el.style['background-color'] = 'aqua';//使用[*-*]属性名
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="myId" onclick="changeStyle()">点我改变我的style属性</div>
  <script>
    function changeStyle(){
      var el = document.getElementById('myId');
      el.setAttribute('style','color:red;font-size:36px');
    }
  </script>
</body>
</html>

这两种方法都会把原有的样式覆盖掉，推荐还是使用修改HTML class属性的方法间接修改样式好。

JavaScript 动态修改HTML CSS

查找HTML元素

动态改变HTML内容

动态改变CSS样式

猜你喜欢

热点阅读