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实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
vue实现全选、反选功能
Nov 17 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
vue v-model的用法解析
Oct 19 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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
终于听上了直流胆调频
2021/03/02 无线电
php include的妙用,实现路径加密
2008/07/29 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
python操作MySQL数据库的方法分享
2012/05/29 Python
Python装饰器使用示例及实际应用例子
2015/03/06 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python matplotlib拟合直线的实现
2019/11/19 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
python re模块常见用法例举
2021/03/01 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
Final类有什么特点
2012/04/25 面试题
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android