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 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
document.all与WEB标准
2020/05/13 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
python3使用flask编写注册post接口的方法
2018/12/28 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
临床医师专业个人自我评价范文
2013/11/07 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
高效课堂标语
2014/06/26 职场文书
2015年党员自评材料
2014/12/17 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技