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 页面编码与浏览器类型判断代码
Jun 03 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
javascript动态创建链接的方法
May 13 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
详解vue表单——小白速看
Apr 08 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
微信小程序拼接图片链接无底洞深入探究
Sep 03 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
php 8小时时间差的解决方法小结
2009/12/22 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
怎么清空javascript数组
2013/05/11 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
分享vim python缩进等一些配置
2018/07/02 Python
python中的字符串内部换行方法
2018/07/19 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
财务人员个人求职信范文
2013/12/04 职场文书
社区党员先进事迹
2014/01/22 职场文书
中学生演讲稿
2014/04/26 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
2015毕业寄语大全
2015/02/26 职场文书
2015中学教学工作总结
2015/07/22 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
python中如何对多变量连续赋值
2021/06/03 Python
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript