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 相关文章推荐
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
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_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
python 实现插入排序算法
2012/06/05 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
python读取xlsx的方法
2018/12/25 Python
python调用c++传递数组的实例
2019/02/13 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
简历自我评价怎么写呢?
2014/01/06 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
《悯农》教学反思
2014/04/28 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
小学运动会前导词
2015/07/20 职场文书
vue实现锚点定位功能
2021/06/29 Vue.js
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript