JavaScript驾驭网页-CSS与DOM


Posted in Javascript onMarch 24, 2016

推荐阅读:JavaScript驾驭网页-DOM

DOM是种符合万维网标准的HTML操纵方式,它能比innerHTML特性达成更多操控功能

这里有HTML代码与CSS代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
span.class1{
background-color:#DDDDDD;
}
span.class2{
background-color:#221717;
}
</style>
</head>
<body>
<span id="span1" class="class1">
Start Game
</span>
<span id="span2" class="class2">
Start Game
</span>
</body>
</html>

借由改变节点的整份样式类,className节点特性达成戏剧性的样式变化

DOM透过节点属性的className特性,提供对元素样式类的访问

alert(document.getElementById(“span1”).className);

通过更改CSS样式类的名称,完成对元素外观的转变

document.getElementById(“span1”).className=”class2”;//将span1的样式换成span2的样式

同理,我们也可以在这里用onmouseover()与onmouseout()事件对元素的样式加以控制

<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'">

虽然这种效果一般用CSS来加以控制,不过,这里只注重对这些工具的应用,大家触类旁通即可

CSS样式类与Javascript类完全无关——它们是完全不同的东西

借由访问节点的单一样式特性,style节点特性达成少量样式变化

节点的Style特性提供对单一样式特性的访问

<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'" style=" visibility:hidden">

style=” visibility:hidden”指示元素隐藏

网页元素可以利用元素对象的visibility 样式特性做动态的显示或隐藏(display:none/display:block 同样可以完成对元素的隐藏与显示)

DOM能随意创建任何HTML元素,当然包括文本段落

document.createElement()用于创建一个HTML标签,参数是标签名

document.createElement(“p”)创建一个p标签

另:document.createTextNode()用于创建文本段落,参数是文本内容

var pElem=document.createElement(“p”);//创建一个P标签

pElem.appendChild(document.createTextNode(“Hello WeAreZero!”));//为P标签添加子元素 文本

document.getElementById(“span1”).appendChild(pElem);//将P标签以及其子元素添加到span1标签下

附录:

利用document对象的createElement()方法,能够创建任何HTML元素

若需新增元素的文本内容,必须创建一个文本内容子元素,并附加至元素下

借由小心地新增与移除DOM树上的节点,网页可以随意拆解与重组

JavaScript驾驭网页-CSS与DOM的介绍就到这里,希望对大家有所帮助!

Javascript 相关文章推荐
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
js加强的经典分页实例
Mar 15 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
JavaScript驾驭网页-DOM
Mar 24 #Javascript
常用的JQuery函数及功能小结
Mar 24 #Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 #Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 #Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 #Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 #Javascript
java中String类型变量的赋值问题介绍
Mar 23 #Javascript
You might like
帅气的琦玉老师
2020/03/02 日漫
PHP 身份验证方面的函数
2009/10/11 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
js登录弹出层特效
2014/03/07 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
Vue.use源码分析
2017/04/22 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
原生js实现购物车
2020/09/23 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
NumPy 数组使用大全
2019/04/25 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
大四学生思想汇报
2014/01/13 职场文书
初二物理教学反思
2014/01/29 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
新课程改革心得体会
2016/01/22 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers