如果说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. day 13 内置函数

    内置函数思维导图:https://www.processon.com/view/link/5c13ad2de4b0ed122da75668 内置函数 作用域相关:   locals() 返回当前作用域 ...

  2. Hive(9)-自定义函数

    一. 自定义函数分类 当Hive提供的内置函数无法满足你的业务处理需要时,此时就可以考虑使用用户自定义函数. 根据用户自定义函数类别分为以下三种: 1. UDF(User-Defined-Functi ...

  3. 使用C语言协助办公_02批量修改学生信息

    最新录制了一个使用C语言批量修改学生信息的视频,主要是讲了如何处理文件路径以及批量修改的思路.灵感来源于需要将整个17级社保照片按规格改名字.具体见:https://chuanke.baidu.com ...

  4. 闰年相关的问题v3.0——计算有多少闰年

    # include<stdio.h>int main(){ int a,b,i; int sum = 0; printf("Input your birth year:" ...

  5. 小程序开发-9-Behavior行为与加入缓存系统优化流行页面

    Behavior行为与加入缓存系统优化流行页面 navi组件与移动端触碰区域探讨 触碰区域优化 设计师切图切大点,多余部分变成透明色 前端将可触碰区域变大 解决向左箭头变灰,向右变灰 禁用事件的技巧 ...

  6. Scala学习笔记（四）—— 数组

    定长数组Array 定义定长数组用Array,有如下几种方法: 初始化一个长度为8的定长数组,其所有元素默认值均为0 scala> new Array[Int](8) res0: Array[I ...

  7. MAC下SecureCRT 8.0.4破解版远程连接工具的安装与配置

    一 SCRT的软件的安装:首先访问 http://xclient.info/s/securecrt.html?_=4365bb5cf097dc2c135a57c2ce30b264 选择8.0.4的版本 ...

  8. 优步UBER司机高峰小时保底奖励

    高峰小时保底奖励 (此奖励仅针对6月1日及以后激活的优步车主): ​ 得到“高峰小时保底”的前提为: 1. 在规定高峰时间段内(不得跨段计算),任意一小时内至少完成一单: 2. 在规定高峰时间段内,任 ...

  9. 青岛Uber优步司机奖励政策（8/10-8/16）

    亲爱的Uber青岛优步的大司机朋友们,又到了每周发布奖励细则的时刻啦!下一周的奖励与上周有所不同,请一定要仔细按照自己的情况阅读!另外,之前参与过投票并表示想加入新小时保底政策的老司机朋友们从本周起, ...

  10. SpringBoot-03：SpringBoot+Idea热部署

      ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 所谓热部署,就是在项目启动中,修改class类中做的修改操作,无需重新启动项目,就可以变更,在网页展示中有 ...