JavaScript 拾碎[三] 使用className属性


Posted in Javascript onOctober 16, 2010

A 三位一体的页面
网页的结构层(Structure )由HTML 或XHTML 创建;
网页的表现层(Presentation )由CSS 来创建;
网页的行为层(Behavior )由Javascript 和DOM 所完成;

其实,网页的表现层和行为层总是存在的,即使用户没有去定义。因为Web 浏览器会把自身默认的样式和事件加载到网页的结构层上。

B 使用className 属性
Javascript 还可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化。
代码示例:

<html> 
<head> 
<title>追加CSS类别</title> 
<style type="text/css"> 
.myUL1{ 
color:#0000FF; 
font-family:Arial; 
font-weight:bold; 
} 
.myUL2{ 
text-decoration:underline; 
} 
</style> 
<script language="javascript"> 
function check(){ 
var oMy = document.getElementsByTagName("ul")[0]; 
oMy.className += " myUL2"; //追加CSS类,注意" myUL2"前面的空格. 
} 
</script> 
</head> 
<body> 
<ul onclick="check()" class="myUL1"> 
<li>HTML</li> 
<li>JavaScript</li> 
<li>CSS</li> 
</ul> 
</body> 
</html>

运行时,单击列表后,实际上<ul> 的class 属性变为:
<ul onclick="check()" class="myUL1 myUL2">

注意:
i > 如果是直接修改className 属性值,则是对CSS 进行替换;
ii > 但以上代码不是将原有的CSS 样式覆盖,而是对现有CSS 样式进行追加。
追加的前提是:保证追加的CSS 与原先的CSS 不重复;

经验:
浏览器之间显示的差异,通常都是因为各个浏览器本身对CSS 属性的默认值不同所导致的。
通常的解决办法是:程序员自己指定该值,而不让浏览器使用其默认值即可。

Javascript 相关文章推荐
JavaScript this 深入理解
Jul 30 Javascript
jquery last-child 列表最后一项的样式
Jan 22 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 #Javascript
自己整理的一个javascript日期处理函数
Oct 16 #Javascript
理解Javascript_10_对象模型
Oct 16 #Javascript
理解Javascript_09_Function与Object
Oct 16 #Javascript
理解Javascript_08_函数对象
Oct 15 #Javascript
javascript instanceof 内部机制探析
Oct 15 #Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 #Javascript
You might like
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
php自动载入类用法实例分析
2016/06/24 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
Python+django实现简单的文件上传
2016/08/17 Python
python实现Zabbix-API监控
2018/09/17 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
网页设计个人找工作求职信
2013/11/28 职场文书
培训协议书范本
2014/04/22 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
心得体会的写法
2014/09/05 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
Spring中bean集合注入的方法详解
2022/07/07 Java/Android