JavaScript基础之DOM修改样式
1.获取或设置元素的内容:3个属性:
1. innerHTML: 获取或设置元素开始标签到结束标签之间的所有HTML代码原文。
何时使用:只要获得完整的html代码原文时
优化:如果批量删除或插入多个子元素时,尽量避免单个操作!
每次插入或删除操作都会导致排版引擎重新layout。
如果批量删除或插入,排版引擎只需要一次layout即可。
如何优化:
1. 删除: parent.innerHTML="";
2. 插入: parent.innerHTML="多个元素的html标签组成的html代码字符串";
2. textContent: 仅获取或设置元素开始标签到结束标签之间的文本内容。不包含标签。如果是特殊符号,会返回特殊符号的正文。
IE8不兼容: innerText
2. ***获取或设置元素的属性:
凡是元素的属性都是字符串!
1. 获取元素的属性:3种:
1. var attrNode=elem.attributes[i/"属性名"]
获得属性节点对象
attrNode.value 获得属性中的值
*2. elem.getAttribute("属性名") 直接返回属性值!
3. elem.getAttributeNode("属性名") 获得属性节点对象
.value才能获得值
2. 设置元素的属性: 3种:——核心DOM
1. elem.attributes[i/"属性名"].value="属性值"
只能修改现有属性
*2. elem.setAttribute("属性名","属性值")
即可新增属性,也可修改现有属性
3. elem.setAttributeNode(属性节点对象)
Elem1.setAttributeNode(elem2.attributes["属性名"])
3. 判断元素中是否包含指定属性:
elem.hasAttribute("属性名")-->包含:true,否则:false
4. 删除元素中的指定属性:
elem.removeAttribute("属性名")
总结:attributes get/set/has/removeAttribute
***属性(Property) vs 特性(Attribute)
属性: 内存中一个对象的成员属性,一般用.访问
特性: 页面中html元素上的html属性,一般用get/setAttribute
对于html标准属性:二者完全相同!
HTML DOM将所有标准属性已经封装在了元素对象中
如果没有主动设置,默认值为""
elem.属性名="值"
自定义特性:只能用核心DOM访问 ——只能访问页面元素中的
html5:elem.dataset保存了所有页面元素中的自定义特性
设置/获取:elem.dataset.属性名
专门访问以data-开头的自定义特性
手动在页面添加自定义特性必须加data-前缀
***修改样式:2处:
1. 仅获取或设置内联样式:
elem.style.属性名="值";
其实elem.style是CSSStyleDeclaration类型的对象
封装了一个元素所有css样式属性的值
固定套路:清除一个元素的所有内联样式:
elem.style.cssText="";
2. 获取元素最终应用的所有样式:计算后的样式
var style=getComputedStyle(elem);
style也是CSSStyleDeclaration类型的对象
IE8:elem.currentStyle;
style.属性名
只要设置:elem.style.属性名 -> 加入内联样式,优先级最高!
不影响其他元素的样式
只要获取:var style=getComputedStyle(elem)
3. 改样式表中的样式:3步:chrome不支持本地的外部css文件
1. 从样式表集合中获取第i个样式表对象
var sheet=document.styleSheets[i]
sheet是CSSStyleSheet类型的对象:
1. sheet.cssRules集合: 样式表中所有cssRule对象
cssRule对象:css中每个{}就是一个cssRule对象
cssRule下还可包含子Rule,比如: @keyframes
2. cssRule对象下,又包含:
1. cssText: 保存Rule完整的字符串
2. selectorText: 选择器名称
*3. style: CSSStyleDeclaration
style.属性名
2. 获取CSSRule对象:
var rule=sheet.cssRules[i]
3. 通过rule获得style对象
var style=rule.style
style.属性名='值';
JavaScript基础之DOM修改样式的更多相关文章
- JavaScript基础:DOM操作详解
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...
- javascript基础:dom
Dom: * 概念:Document Object Model 文档对象模型 * 将标记语言文档的各个组成部分,封装成对象,可以使用这些对象,对标记语言文档进行CRUD的动态操作 * D ...
- JavaScript基础08——DOM
DOM的概念 DOM是document Object Model的缩写,简称文档对象模型.他给文档提供了一种结构化的表示方式,可以改变文档的内容和呈现方式 所谓的DOM是以家族的形式描述HTML.父子 ...
- JavaScript基础 -- 常见DOM树操作
1.创建并增加元素节点 <ul id="ul"> <li>1</li> <li>2</li> <li>3&l ...
- JavaScript 基础知识 - BOM篇
前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...
- javascript基础系列(入门前须知)
-----------------------小历史---------------------------- javascript与java是两种语言,他们的创作公司不同,JavaScript当时是借 ...
- JavaScript DOM高级程序设计 5动态修改样式和层叠样式表2--我要坚持到底!
把样式置于DOM脚本之外 style属性 我们可以这样设置前景色之类的属性: element.style.color='red'; 也可以使用下面的代码设置背景颜色: element.style.ba ...
- 第一百一十六节,JavaScript,DOM操作样式
JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- JavaScript基础(2)-DOM
一.伪数组arguments arguments代表的是实参,有个讲究的地方是:arguments只在函数中使用. 1.返回函数实参的个数:arguments.length,例如: fn(2,4); ...
随机推荐
- NOIP 2014 Day2 T1 无线网络发射器
#include<iostream> #include<cmath> #include<cstdlib> #include<cstdio> #inclu ...
- 使用discovery板上的st-link给别的板子下载
discovery板上的6pin swd接口 20pin 的jtag 接线: 6 20 def 1 1 目标vdd 2 9 swclk(PA14) 3 20 gnd 4 7 swdio(PA13) ...
- video 播放
视频播放是个坑... HTML5 Video API : https://www.w3.org/2010/05/video/mediaevents.html 虽然界面很丑,但是事件.属性很全. 进行视 ...
- Java Programming Language Enhancements
引用:Java Programming Language Enhancements Java Programming Language Enhancements Enhancements in Jav ...
- 准备阶段-maven项目构建
依据我现阶段对maven的了解,具使用POM管理项目和强大的repository资源管理库支持. 在项目建立初期,对网站的可拓展.高并发.易于管理做了评估.最终使用Maven 管理该项目 . 如下是m ...
- 微信小程序-视图事件
事件 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 ...
- git中忽略UserInterfaceState.xcuserstate的方法
在commit 时候一直会提示userinterfacestate.xcuserstate文件尚未commit. 你可以用命令行 git rm --cached [YourProjectName].x ...
- asp.net mvc bundle中数组超出索引
在使用bundle 来加载css的时候报错了, @Styles.Render("~/bundles/appStyles") 第一反应 以为是的css 太多了,可是当我这个style ...
- (转载)MongoingDB常用操作
mongo –path db.AddUser(username,password) 添加用户 db.auth(usrename,password) 设置数据库连接验证 db.cloneDat ...
- 一种更清晰的Android架构(转)
一种更清晰的Android架构 一种更清晰的Android架构 原文链接 : Architecting Android…The clean way? 译者 : Mr.Simple & So ...