用js使行为与结构相分离

最新推荐文章于 2022-10-07 21:17:58 发布

皮皮先生

最新推荐文章于 2022-10-07 21:17:58 发布

阅读量407

点赞数

分类专栏：前端文章标签： html javascript

本文链接：https://blog.csdn.net/axiongqiang/article/details/80610763

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

做网页的时候css给我们提供了一个让页面显示与页面结构想分离的方法，也就是给元素加上class或者id之类的表示，然后在.css文件中定义显示的样式，这样使我们可以更方便的管理页面的显示，以及修改网页样式。其实我们通过JavaScript同样可以将页面的结构与行为分开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <table border="1px" width="300px">
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
  </table>
  <table id="i1" border="1px" width="300px">
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
  </table>
  <script>
//      var myTAB=document.getElementsByTagName("tr")
      var myTAB1=document.getElementById("i1")
      var myTAB=myTAB1.getElementsByTagName("tr")
      var len=myTAB.length;
      for (var i=0;i<len;i++){
          myTAB[i].onmouseover=function () {
              this.style.backgroundColor="red"
          }
          myTAB[i].onmouseout=function () {
              this.style.backgroundColor=""
          }
      }
  </script>
</body>
</html>

皮皮先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用js使行为与结构相分离

做网页的时候css给我们提供了一个让页面显示与页面结构想分离的方法，也就是给元素加上class或者id之类的表示，然后在.css文件中定义显示的样式，这样使我们可以更方便的管理页面的显示，以及修改网页样式。其实我们通过JavaScript同样可以将页面的结构与行为分开。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt...
复制链接

扫一扫

专栏目录