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中有趣的反柯里化深入分析
Dec 05 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
JS array数组检测方式解析
May 19 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 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
Content-type 的说明
2006/10/09 PHP
PHP URL路由类实例
2013/11/12 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
php算法实例分享
2015/07/14 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
深入分析PHP设计模式
2020/06/15 PHP
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
python 安装impala包步骤
2020/03/28 Python
工程项目经理岗位职责
2013/12/15 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
考试作弊检讨
2015/01/27 职场文书
表扬信格式模板
2015/05/05 职场文书