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 相关文章推荐
JSON 数据格式介绍
Jan 13 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
Vue的编码技巧与规范使用详解
Aug 28 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
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
ext监听事件方法[初级篇]
2008/04/27 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
使用JavaScript破解web
2018/09/28 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
django认证系统 Authentication使用详解
2019/07/22 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
应届护士推荐信
2013/11/16 职场文书
数学教研活动总结
2014/07/02 职场文书
医德医风个人总结
2015/02/28 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
升学宴家长致辞
2015/07/27 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis