如果说web的研究对象是html和css，那么整个dom结构，包含html树和dom树的dom结构才是研究对象，而在整个页面呈现上面，js起到的作用则是异步的用户行为。

按照上面整个思路，获取dom元素，修改dom相关的样式和属性，就显得无比重要了。博客里面已经有讲过关于dom对象文章：原生js操作Dom节点:CRUD，本文主要讲解dom样式的操作和属性的操作。

操作的含义包含读取和修改。

对于dom的样式操作：

1）通过ele.style获取，例如

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>修改以及读取场景</title>

 </head>

 <body>

     <div id="test" style="color: red">

     </div>

     <script type="text/javascript">

         var color=document.getElementById("test").style.color;

         alert(color);

     </script>

 </body>

 </html>

但这种方式的局限性是，只有当样式为行内样式时候，才能够获取到，否则不可以。

2）一般的获取精准样式的方式使用window的api，getComputedStyle，例如

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>修改以及读取场景</title>

     <style type="text/css">

         #test{

             color:red;

         }

     </style>

 </head>

 <body>

     <div id="test">

     </div>

     <script type="text/javascript">

         var color=document.getElementById("test");

         alert(window.getComputedStyle(color,null).color);

     </script>

 </body>

 </html>

至于修改样式，直接使用el.style[name]=value就可以搞定。

对于dom的属性的操作：

1）使用getAttribute这个api读取

2）使用setAttribute这个api设置

本文结束。

Dom的样式操作和属性操作的更多相关文章

  1. JQuery DOM操作（属性操作/样式操作/文档过滤）

    jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...

  2. python 之 前端开发（ jQuery选择器、筛选器、样式操作、文本操作、属性操作、文档操作）

    11.5 jQuery 引入方式: 方式一:本地引入 <script src="jquery-3.3.1.min.js"></script> <scr ...

  3. jQuery样式及html属性操作

    样式及html属性操作1,行内样式 css(); a:获取样式 元素.css(样式名称); b:设置单个样式 元素.css("样式名称":"样式值"); c:设 ...

  4. jQuery使用（二）：DOM样式操作和属性操作

    DOM取值与赋值 .html() .text() .size() 1.html()方法类似原生DOM的属性innerHTML,不传入参数的时候默认为取指定元素内的HTML内容,包含前后空白文本结构,以 ...

  5. jQuery 样式操作、文档操作、属性操作的方法总结

    文档操作: addClass()             向匹配的元素添加指定的类名.after()                    在匹配的元素之后插入内容.append()         ...

  6. DOM对象之查找标签&属性操作

    HTML DOM (文档对象模型) DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法. JavaScript对DOM进行了实现,对应于JavaScript中 ...

  7. JavaScrip——DOM操作（属性操作）

    Attribute a.setAttribute("属性名","属性值")——设置属性 a.getSttribute("属性名")——获取属 ...

  8. DOM操作之属性和样式操作

    在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法. 在开始操作前,我们需要先在html中添加如下代码,后面所 ...

  9. JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作

    html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick=&q ...

随机推荐

  1. mysql索引建立原则

    看了网上一些网上关于创建索引的原则,在这里做一下总结: 1.尽量创建在使用频率较高的字段上,比如主键,外键,where总用到的字段,join是相关联的字段 2.如果表过大,一定要创建索引. 3.索引应 ...

  2. 16-oauth2-oidc-Client实现

    1-新建.net core2.1 mvc网站 2-在Startup.config文件增加相关代码, 下面代码已经配置好oidc客户端了,并设置本mvc启动ip为5009 public void Con ...

  3. 北京Uber优步司机奖励政策(1月27日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  4. 4567: [Scoi2016]背单词

    4567: [Scoi2016]背单词 https://www.lydsy.com/JudgeOnline/problem.php?id=4567 题意: 题意看了好久,最后在其他人的博客里看懂了的. ...

  5. P1011 车站

    P1011 车站 题目描述 火车从始发站(称为第1站)开出,在始发站上车的人数为a,然后到达第2站,在第2站有人上.下车,但上.下车的人数相同,因此在第2站开出时(即在到达第3站之前)车上的人数保持为 ...

  6. SpringBoot入门（一）——开箱即用

    本文来自网易云社区 Spring Boot是什么 从根本上来讲Spring Boot就是一些库的集合,是一个基于"约定优于配置"的原则,快速搭建应用的框架.本质上依然Spring, ...

  7. 写了个汉字转G代码工具，无描边的那种，市面上没有类似的小软件

    学了不少G代码知识, 将公司废旧的三轴非标设备改造成了一个雕刻机,市面上的小软件不好用 网上下的软件有描边的,字体刻起来太粗,这个比较好用,看图应该都能明白吧, 就自己写了个,“少于150字的随笔不允 ...

  8. 使用ListView+ObjectDataSource+DataPager实现增删改查加分页

    一.配置objectDataSource 选择业务逻辑层的类 二.配置Select对应的方法,必须是一个带两个整型参数的方法,第一个参数表示要查看的第一条记录的前一条30,第二个参数每页最多能显示的记 ...

  9. VIN码识别（车架号识别）在二手车交易中的应用

    最新数据统计,2015年,中国卖出2110万辆新车,相比之下,美国卖出去了1740辆新车.然而,如果算上二手车,美国的汽车市场销量将扩展到4000多辆,而中国的乘用车才不到3000万辆. 销售总额上, ...

  10. Qml-Dialog不能隐藏标题栏和按钮自定义

    在项目中,需要弹出一个对话框来完成用户输入的功能,为了考虑界面的同一,这里需要将原生自带的标题栏隐藏掉,换成自己写的 按照widget的写法,可以使用QDialog,但是qml与之对应的Dialog我 ...