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 相关文章推荐
在新窗口打开超链接的方法小结
Apr 14 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 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的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
layui导航栏实现代码
2017/05/19 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
对VUE中的对象添加属性
2018/09/18 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
tensorflow 打印内存中的变量方法
2018/07/30 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
银行自荐信范文
2013/10/07 职场文书
大学四年学习的自我评价分享
2013/12/09 职场文书
教师网络培训感言
2014/03/09 职场文书
社区科普工作方案
2014/06/03 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
Vue全局事件总线你了解吗
2022/02/24 Vue.js
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python