<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>DOM属性获取、设置、删除</title>

    <!--

        e.getAttribute("id");获取元素e属性id的值，只要是已设置的属性都可以获取

        e.setAttribute("id","red");设置元素e属性id的值为red，也可以用来添加新属性

        e.removeAttribute("id");删除e元素的id属性

        切记：以上方法只对写在行内的属性有效

            正确姿势：e.setAttribute("style","color:red;background:grey");//或者id/class/name等；

            删除元素的属性同理，但e.removeAttribute("style");//只对行内样式有效

     -->

</head>

<body>

    <div id="p1" class="pp" align="center" 随便写个属性="随便写个值">我是什么颜色</div>

    <script>

        var a=document.getElementById("p1");

        console.log(a.id);//p1

        console.log(a.class);//undefined;无法直接获取class的值

        console.log(a.align);//center

        console.log(a.随便写个属性);//undefined;无法获取自定义的属性

        //e.getAttribute("")

        console.log(a.getAttribute("id"));//p1

        console.log(a.getAttribute("class"));//pp

        console.log(a.getAttribute("随便写个属性"));//随便写个值

        //e.setAttribute("属性","值")

        a.setAttribute("随便写个属性","我重新设置了一个属性");//页面中：随便写个属性="我重新设置了一个属性"

        a.setAttribute("style","background: red;font-style: italic;");//给元素a设置属性background-color,值为red

        //e.removeAttribute("要删除的属性")

        a.removeAttribute("align");//删除了元素a的align属性

    </script>

</body>

</html>

DOM属性获取、设置、删除的更多相关文章

  1. iOS UIWebView 和 WKWebView 的 cookie 获取,设置,删除

    Cookie简介说到Cookie,或许有些小伙伴会比较陌生,有些小伙伴会比较熟悉.如果项目中,所有页面都是纯原生来实现的话,一般Cookie这个东西或许我们永远也不会接触到.但是,这里还是要说一下Co ...

  2. js提取DOM属性和设置DOM属性值

    <style type="text/css"> #div1{width:100px;height:100px;} #div2{background} </styl ...

  3. JQuery DOM操作：设置内容&属性&添加元素&插入元素&包裹&克隆&移除&替换

    JQuery text().html().val() $(elem).text(str):添加文本内容str到elem类型元素,返回jQuery对象 $(elem).text():返回第一个elem标 ...

  4. [TimLinux] JavaScript 获取设置在CSS类中的属性值

    1. 设置属性值 // 常用方式 var myEl = document.getElementById('idMyEl'); myEl.style.display = "none" ...

  5. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  6. jquery获取(设置)节点的属性与属性值

    1. attr(属性名)        //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2 ...

  7. cookies的获取，删除，设置

    cookies,sessionStorage 和 localStorage 的区别? 1.cookie在浏览器和服务器间来回传递. sessionStorage和localStorage不会: 2.s ...

  8. c# 如何通过反射 获取\设置属性值

    c# 如何通过反射 获取\设置属性值 //定义类public class MyClass{public int Property1 { get; set; }}static void Main(){M ...

  9. 背水一战 Windows 10 (67) - 控件（控件基类）: DependencyObject - CoreDispatcher, 依赖属性的设置与获取, 依赖属性的变化回调

    [源码下载] 背水一战 Windows 10 (67) - 控件(控件基类): DependencyObject - CoreDispatcher, 依赖属性的设置与获取, 依赖属性的变化回调 作者: ...

随机推荐

  1. 外网访问虚拟机搭建的web服务

    凌晨了,就简单写个一定可行的思路吧,有时间了再补上. 设置虚拟机为桥接模式,当然NAT也行,只是我嫌NAT麻烦 设置路由器,将虚拟机端口映射到外网

  2. PAT(B) 1072 开学寄语（Java）统计

    题目链接:1072 开学寄语 (20 point(s)) 题目描述 下图是上海某校的新学期开学寄语:天将降大任于斯人也,必先删其微博,卸其 QQ,封其电脑,夺其手机,收其 ipad,断其 wifi,使 ...

  3. 利用strace & Perf分析MySQL

    strace介绍及用途 strace是一个用于诊断,分析linux用户态进程的工具 类似的工具pstrace,lsof,gdb,pstrack strace观察mysqld对my.cnf 配置文件的加 ...

  4. 软件包 javax.naming了解

    Context  此接口表示一个命名上下文,它由一组名称到对象的绑定组成. Name  Name 接口表示一个一般名称,即一个有序的组件序列. NameParser  此接口用于解析取自分层的名称空间 ...

  5. Qt更新组件出现（“要继续此操作，至少需要一个有效且已启用的储存库”）

    Qt更新组件出现(“要继续此操作,至少需要一个有效且已启用的储存库”)   目的: 当时在安装Qt时,有些组件暂时没用着,然后过一段时间后,需要用到某些该组件时,不用删掉重新再安装. 操作: Wind ...

  6. Netty服务端创建流程及组件职责

    public class NettyServer { public static void main(String[] args) throws InterruptedException { NioE ...

  7. SQL根据指定节点ID获取所有父级节点和子级节点(转载)

    --根据指定节点ID获取所有子节点-- WITH TEMP AS ( ' --表的主键ID UNION ALL SELECT T0.* FROM TEMP,table_name T0 WHERE TE ...

  8. C#避免WinForm窗体假死

    WinForm窗体在使用过程中如果因为程序等待时间太久而导致窗体本身假死无法控制,会严重影响用户的体验,这种情况大多是UI线程被耗时长的代码操作占用所致,可以新开一个线程用来完成耗时长的操作,然后再将 ...

  9. span标签中显示固定长度，超出部分用省略号代替，光标放到文字上显示全部

    在span中实现显示某段内容,固定其长度,多余部分用省略号代替,这样就用到html的title属性: 如:<span title="value"></span&g ...

  10. echarts3关系图：力引导布局， 固定某些节点

    在数组里设置 fixed: true,<a href='http://echarts.baidu.com/option.html#series-graph.data.fixed'>官方文档 ...