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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
Javascript创建类和对象详解
May 31 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
详解CocosCreator项目结构机制
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
关于手调机和数调机的选择
2021/03/02 无线电
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
jquery编写日期选择器
2017/03/16 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
Vue渲染函数详解
2017/09/15 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
vue接口请求加密实例
2020/08/11 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
Python作用域用法实例详解
2016/03/15 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
python实现按首字母分类查找功能
2019/10/31 Python
python数据分析:关键字提取方式
2020/02/24 Python
python 绘制场景热力图的示例
2020/09/23 Python
python如何实现word批量转HTML
2020/09/30 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
办公室前台岗位职责
2014/01/04 职场文书
高一历史教学反思
2014/01/13 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
教师师德承诺书2016
2016/03/25 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技