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自带函数备忘 数组
Dec 29 Javascript
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
JS代码实现table数据分页效果
May 26 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
JavaScript多种图形实现代码实例
Jun 28 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
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
php用正则表达式匹配中文实例详解
2013/11/06 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
Python三元运算实现方法
2015/01/12 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
Python中for循环控制语句用法实例
2015/06/02 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
专科文秘应届生求职信
2013/11/18 职场文书
教师演讲稿范文
2014/01/08 职场文书
面试后的英文感谢信
2014/02/01 职场文书
2014年教研组工作总结
2014/11/26 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
欠条范文
2015/07/03 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
Vue h函数的使用详解
2022/02/18 Vue.js
Redis 限流器
2022/05/15 Redis