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 相关文章推荐
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
Vue动态组件实例解析
Aug 20 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 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
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
python字典操作实例详解
2017/11/16 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
关于Assembly命名空间的三个面试题
2015/07/23 面试题
物业管理毕业生的自我评价
2014/02/17 职场文书
教师师德承诺书
2014/03/26 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
安全演讲稿开场白
2014/08/25 职场文书
创新社会管理心得体会
2014/09/12 职场文书
毕业实习单位意见
2015/06/04 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang