Dom的样式操作和属性操作
如果说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的样式操作和属性操作的更多相关文章
- JQuery DOM操作(属性操作/样式操作/文档过滤)
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...
- python 之 前端开发( jQuery选择器、筛选器、样式操作、文本操作、属性操作、文档操作)
11.5 jQuery 引入方式: 方式一:本地引入 <script src="jquery-3.3.1.min.js"></script> <scr ...
- jQuery样式及html属性操作
样式及html属性操作1,行内样式 css(); a:获取样式 元素.css(样式名称); b:设置单个样式 元素.css("样式名称":"样式值"); c:设 ...
- jQuery使用(二):DOM样式操作和属性操作
DOM取值与赋值 .html() .text() .size() 1.html()方法类似原生DOM的属性innerHTML,不传入参数的时候默认为取指定元素内的HTML内容,包含前后空白文本结构,以 ...
- jQuery 样式操作、文档操作、属性操作的方法总结
文档操作: addClass() 向匹配的元素添加指定的类名.after() 在匹配的元素之后插入内容.append() ...
- DOM对象之查找标签&属性操作
HTML DOM (文档对象模型) DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法. JavaScript对DOM进行了实现,对应于JavaScript中 ...
- JavaScrip——DOM操作(属性操作)
Attribute a.setAttribute("属性名","属性值")——设置属性 a.getSttribute("属性名")——获取属 ...
- DOM操作之属性和样式操作
在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法. 在开始操作前,我们需要先在html中添加如下代码,后面所 ...
- JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作
html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick=&q ...
随机推荐
- day3-exercise
# Author: 刘佳赐-Isabelle October 28,2018 """ 1. 文件a1.txt内容 序号 部门 人数 平均年龄 备注 1 python 30 ...
- C语言实验报告(四)完全数
完全数,又称完美数或者完备数.是一些特殊的自然数.它所有的真因子的和,恰好等于它本身.编程找出1000以内的所有完全数,并输出该数成为完全数的因子. (例如6=1+2+3.按照6,its factor ...
- 北京Uber优步司机奖励政策(1月6日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- springboot 常用依赖
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven ...
- 海思NB-IOT的SDK看门狗的使用
1. 看门狗需要喂狗,如果自己写的任务一直运行,那么空闲任务无法运行会导致看门狗复位,来看下看门狗的机制,首先系统启动的时候创建了空闲任务 在这个函数里面void vTaskStartSchedule ...
- Java并发编程系列一:Future和CompletableFuture解析与使用
一.Future模式 Java 1.5开始,提供了Callable和Future,通过它们可以在任务执行完毕之后得到任务执行结果. Future接口可以构建异步应用,是多线程开发中常见的设计模式. 当 ...
- java Arrays.asList
List<String> list = Arrays.asList("A B C D E F G H I J K L ".split(" ")); ...
- egrep及扩展正则
模式:pattern 正则: grep:基本正则,查找速度慢 Extended grep:扩展正则 fgrep:fast grep,不支持正则,直接查找字符串,执行速度快 基本正则: . :任意单个字 ...
- 基于Python的接口自动化
第一步 Python的安装配置 打开官网: https://www.python.org/downloads/ 目前官网上已经更新到3.6.1啦,有两个版本,大家可以按自己喜欢的去下载,我自己选择的是 ...
- Python字符串操作大全(非常全!!!)
1. python编程里字符串的内置方法(非常全) capitalize() 把字符串的第一个字符改为大写 casefold() 把整个字符串的所有字符改为小写 center(width) 将字符串居 ...