美文网首页
结构 样式 动作 相分离

结构 样式 动作 相分离

作者: xin激流勇进 | 来源:发表于2017-12-16 19:53 被阅读0次

绑定事件的两种方式


  • 直接标签绑定<p onclick='fun();'></p>

  • 先获取Dom对象,然后进行绑定
    document.getElementById('i1').onclick=function(){
    //this.style.backgroundColor = 'red';
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" 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 myTrs = document.getElementsByTagName('tr')
        for(var i=0;i<myTrs.length;i++){
            myTrs[i].onmouseover = function () {
                this.style.backgroundColor = "red";
            }

            myTrs[i].onmouseout = function () {
                this.style.backgroundColor = '';
            }
        }
    </script>
</body>
</html>

相关文章

  • 结构 样式 动作 相分离

    绑定事件的两种方式 直接标签绑定 先获取Dom对象,然后进行绑定document.getElementById('...

  • React学习(二)-深入浅出JSX

    前言 在Jq,原生javascript时期,在写页面时,往往强调的是内容结构,层叠样式,行为动作要分离,三者之间分...

  • 样式与结构分离

    为表现样式编码和实现正确的语义编码,二者在基本原理上的差别上比较微妙。这里给出了一段示例代码来帮助我们更好的区别。...

  • CSS简单备忘

    结构、样式、行为分离 CSS的三种类型 内联样式表(inline style sheets) 内部样式表/内嵌样式...

  • 前端开发规范

    基本原则 结构、样式、行为分离 尽量确保分档和模板只包含HTML结构,样式都放到样式表里,行为都放到脚本里。 缩进...

  • 前端开发规范(W3C笔记)

    基本原则 结构、样式、行为分离 尽量确保文档和模板只包含HTML结构,样式都放到样式表里,行为都放到脚本里。 缩进...

  • 06 js01 数据类型、运算符、类型转换

    W3C标准规定:结构、样式、行为相分离,html负责结构、css负责样式、javascript负责行为;其可以动态...

  • html概念学习总结

    html 超文本标记语言,是网页之骨。 结构样式行为分离 html只写结构,css只写样式,js只写行为。谁也不要...

  • 前端开发规范(HTML,CSS,JS,VUE)

    开发规范 一.HTML规范 1. 基本原则 结构、样式、行为分离尽量确保文档和模板只包含 HTML 结构,样式都放...

  • CSS学习笔记1:基础、复合选择器

    CSS - Cascading Style Sheets 实现结构(HTML)与样式(CSS)的分离 1. 分类 ...

网友评论

      本文标题:结构 样式 动作 相分离

      本文链接:https://www.haomeiwen.com/subject/itkewxtx.html