zoukankan      html  css  js  c++  java
  • 2:操作元素

    一 操作元素内容

    element.innerText // 不识别HTML标签 去除空格和换行
    element.innerHtml // 识别HTML标签 保留空格和换行
    //这两个属性都是可读写的

    indexHtml 和  innerText 的区别

    添加纯文本 就用 innerText
    添加的内容里有 HTML标签 空格 换行 就用innerHtml

    二 操作普通元素属性

    1)语法

    element.属性名; //获取
    element.属性名 = value; //设置
    
    常见的属性:src alt href title id class等

    代码示例

    <button id="btn1">刘德华</button>
    <button id="btn2">杨幂</button>
    <img src="image/ldh.jpg" alt="">
    <script>
        //1 获取元素
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        var img = document.getElementsByTagName('img');
        //给第一个按钮注册事件
        btn2.onclick = function () {
            img[0].src = 'image/ym.jpg';
            img[0].title = '杨幂';
        }
        //给第一个按住注册点击事件
        btn1.onclick = function () {
            img[0].src = 'image/ldh.jpg';//对src地址重新赋值
            img[0].title = '刘德华';
        }
    </script>

    三 操作表单属性

    1)常见的表单属性

    type  value checked  selected  disabled
    类型 值 选中 下拉框选中 按钮禁用

    普通元素的内容用 innerHtml 属性
    表单元素的内容用 value 属性

    四 操作样式属性

    0)两种方法

    // 1 element.style.fontSize = '16px;'; //行内样式法 [ 适合样式少 ]
    
    // 2 element.className = '类名'; //修改类名法 [ 适合样式多且复杂 ]

    1)行内样式法

    1 样式名用小驼峰命名法  fontSize backgroundColor

    2 产生的是行内样式 CSS的权重比较高

    2)修改类名法

    //1 如果修改的样式比较多 我们用修改类名法
    //2 class是系统保留字 所有用className 来操作类名属性
    //3 它会直接更改元素的类名,会覆盖原先的类名
    //4 如果不想覆盖 而是追加样式 element.className = '原类名,追加的类名'

    五 操作自定义属性

    1)方法1

    // . 获取 getAttritute('属性名')
    
    // . 设置 setAttribute('属性名','属性值');
    
    // . 删除 removeAttribute('属性名')

    2)方法2 [ H5新增 ]

    element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持

    3)自定义属性的目的

    //1 为了保存并使用数据 有些数据可以保存到页面中 不用保存到数据库中

    //2 H5 规定所有的自定义属性都以 data- 开头
  • 相关阅读:
    UI设计师需要熟记的45个快捷键Windows、Mac
    手把手教你制作好莱坞大片级场景——宇宙猫
    关于功能图标的绘制方法!
    设计师该如何把简历写好?
    PS合成的5个要点:场景、对比、氛围、模糊、纹理
    UI设计工资有多高?怎么快速拿高薪?
    19. Remove Nth Node From End of List
    18. 4Sum
    17. Letter Combinations of a Phone Number
    16. 3Sum Closest
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14424251.html
Copyright © 2011-2022 走看看