如果说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. python 爬虫 5i5j房屋信息 获取并存储到数据库

    from lxml import etree from selenium import webdriver import pymysql def Geturl(fullurl):#获取每个招聘网页的链 ...

  2. emWin 学习笔记 —— 用VS2017打开emWin仿真包

    使用VS2017打开emWin仿真包 解压以后的仿真包目录 SimulationTrial.sln 就是工程文件,直接使用VS2017打开即可 打开以后就是这样子,不要急着编译.直接编译会出错 在项目 ...

  3. Lucene第一讲——概述与入门

    一.概述 1.什么是Lucene? Lucene是apache下的一个开源的全文检索引擎工具包. 它为软件开发人员提供一个简单易用的工具包(类库),以方便的在目标系统中实现全文检索的功能. 2.能干什 ...

  4. Windows下的SysWow64和System32

    64位的Windows并不是简单地把所有东西都编译成64位就万事大吉的.关于64位的CPU应该做成什么样子,Intel和AMD曾有各自的打算.AMD的回答直接了当:新的64位处理器,应该能在提高更高处 ...

  5. 【BZOJ5290】[HNOI2018]道路(动态规划)

    [BZOJ5290][HNOI2018]道路(动态规划) 题面 BZOJ 洛谷 题目直接到洛谷上看吧 题解 开始写写今年省选的题目 考场上我写了一个模拟退火骗了\(90\)分...然而重测后只剩下45 ...

  6. CSS3 子节点选择器

    CSS3中新增了几个子元素选择器,大大提高了开发者的开发效率.之前有些要通过为一个个子元素添加class,或者js实现才能实现的效果.现在可以很方便的用选择器实现. 这些新的样式已被现代浏览器及IE9 ...

  7. Rails导出CSV

    版本  ruby 1.9  rails 3.2 完整代码 #引入CSV标准类库 require 'csv' class PeopleController < ApplicationControl ...

  8. STM32f469I discovery烧写demo例程

    1. 首先安装STM32 ST-Link Utility V3.7,电脑接板子的CN1,然后在STM32 ST-Link Utility V3.7点击连接目标板子(目标-连接),点击External ...

  9. UPA深度性能报告解读

    WeTest 导读 UPA作为腾讯WeTest与Unity官方联合打造的客户端性能分析工具,为开发者提供了极大的便利和效能提升.产出的分析报告内容详尽,但您是否真的读懂了报告?是否了解每项数据的含义? ...

  10. 第一模块·开发基础-第1章 Python基础语法

    Python开发工具课前预习 01 Python全栈开发课程介绍1 02 Python全栈开发课程介绍2 03 Python全栈开发课程介绍3 04 编程语言介绍(一) 05 编程语言介绍(二)机器语 ...