如果说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. Apache Flume简介及安装部署

    概述 Flume 是 Cloudera 提供的一个高可用的,高可靠的,分布式的海量日志采集.聚合和传输的软件. Flume 的核心是把数据从数据源(source)收集过来,再将收集到的数据送到指定的目 ...

  2. 《TCP/IP详解 卷1：协议》第3章 IP:网际协议

    3.1 引言 IP是TCP/IP协议族中最为核心的协议.所有的TCP.UDP.ICMP及IGMP数据都以IP数据报格式传输(见图1-4).许多刚开始接触TCP/IP的人对IP提供不可靠.无连接的数据报 ...

  3. R语言爬虫：CSS方法与XPath方法对比（代码实现）

    CSS选择器和XPath方法都是用来定位DOM树的标签,只不过两者的定位表示形式上存在一些差别: CSS 方法提取节点 library("rvest") single_table_ ...

  4. Java 反射 (Class、ClassLoader、Constructor、Method、Field)

    反射是Java中一个非常重要.非常强大的机制.曾看到一句话“反射是框架的灵魂”,初学时不懂,等到学完框架之后才慢慢理解其意. 什么是反射?我们先通过几个类和示例来初步体会一下反射. 一.ClassLo ...

  5. Mac OS下Android Studio：/dev/kvm not found

    在配置模拟器时出现该报错,在网上找了很多教程都没能解决,当然可能是这些教程并不适用于我.总的来说,还是要“对症下药”! 解决方法如下: 点击“系统偏好设置”-“安全性与隐私”,然后会在“通用”这个界面 ...

  6. VINS（六）边缘化

    通常的边缘化是将联合概率分布分解为边缘概率分布和条件概率分布的过程,这样可以将Sliding Window中较旧的状态边缘化出Sliding Window,同时保留其信息.并且保证了对应H海塞矩阵的稀 ...

  7. CLR via C#读书笔记二：类型基础

    1.CLR允许将对象转换为它的(实际)类型或者它的任何基类型. 2.is操作符检测对象是否兼容于指定类型,is操作符永远不抛出异常. 3.as操作符返回对同一个对象的非null引用.如果对象不兼容,a ...

  8. web项目优化

    1 循环时没有使用break  案例:查找一个值是否在数组中存在(为举例舍弃自带函数) $aa=123; $arr=array(234,123,5,6,45646,346,23); foreach($ ...

  9. android学习七 菜单

    1.菜单分类 常规菜单 子菜单 上下文菜单 图标菜单 辅助菜单 交替菜单 2.菜单类 andriod.view.menu   3.菜单的参数     名称:字符串标题     菜单ID:整数     ...

  10. python3读取csv文件

    代码如下 import csv with open('D:\\abc\\userinfo.csv',newline='') as f: reader = csv.reader(f) for row i ...