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 相关文章推荐
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
js querySelector() 使用方法
Dec 21 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
原生js实现日期选择插件
May 21 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
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
php定界符
2014/06/19 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
校园报刊亭的创业计划书
2014/01/02 职场文书
开业典礼主持词
2014/03/21 职场文书
市场营销专业自荐书
2014/06/10 职场文书
停车位租赁协议书
2014/09/24 职场文书
2019广播稿怎么写
2019/04/17 职场文书
Python中常见的导入方式总结
2021/05/06 Python