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 相关文章推荐
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
javascript实现微信分享
Dec 23 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
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
我的论坛源代码(七)
2006/10/09 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
js停止输出代码
2008/07/20 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
js 颜色选择插件
2017/01/23 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
Python 没有main函数的原因
2020/07/10 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
《燕子》教学反思
2014/02/18 职场文书
春节慰问简报
2015/07/21 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
MySQL分区表实现按月份归类
2021/11/01 MySQL