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与flash交互通信基础教程
Aug 07 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
Stop SQL Server
2007/06/21 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Python映射拆分操作符用法实例
2015/05/19 Python
python getopt详解及简单实例
2016/12/30 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
python opencv读mp4视频的实例
2018/12/07 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
python实现烟花小程序
2019/01/30 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
python实现两个文件夹的同步
2019/08/29 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
计划生育个人总结
2015/03/02 职场文书
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL