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 错误处理与调试经验总结
Aug 10 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 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 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
js 数组操作代码集锦
2009/04/28 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python中列表(list)操作方法汇总
2014/08/18 Python
django项目搭建与Session使用详解
2018/10/10 Python
用python写测试数据文件过程解析
2019/09/25 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
网上快餐厅创业计划书
2014/02/01 职场文书
四风问题查摆材料
2014/08/25 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
思想工作总结范文
2015/08/12 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python