Java Script基础（十） 访问样式表
动态控制样式表
在JavaScript中，有两种方式可以动态的改变样式属性，一种是使用style属性，另一种是使用样式的className属性。另外控制元素隐藏和显示使用display属性。
1、使用sytle属性
语法：
元素.style.样式属性="值";
在JavaScript中使用CSS样式与在html中使用CSS少有不同，由于JavaScript中的-表示减号，因此如果样式属性名称中带有"-"则要省去，后面首字母要大写。
例如：
document.getElementById("title").style.fontSize="14px"; //更改title标签字体为14号
document.getElementById('id1').style.color='red'; //设置id1字体为红色
这种方式只能获取行内样式属性，如果要获取外部样式和内部样式属性。如果是IE浏览器需要使用currentStyle对象，如果是firefox使用getComputedStyle方法。
<style type="text/css">
#adv {
position: absolute;
top: 20px;
left: 30px;
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript">
function test(){
var adv = document.getElementById("adv");
//alert(adv.style.left + " " + adv.style.top); //如果不是行内样式，则style无效 //如果是IE浏览器
if(adv.currentStyle){
alert("IE浏览器:" +adv.currentStyle.left + " " + adv.currentStyle.top);
}else{
var left = document.defaultView.getComputedStyle(adv,null).left;
var top = document.defaultView.getComputedStyle(adv,null).top;
alert("非IE浏览器:" + left + " " + top);
} }
</script>
<input type="button" value="移动div" onclick="test()" />
<div id="adv" style=""></div>
2、使用className属性
语法：
元素.className="类样式";
这种方式需要预先定义好类样式，然后赋值给className属性。复用性更好。
document.getElementById('id1').className='red'; //为id1添加类样式
3、display属性
语法：
元素.display = "值"
这里的值为css中display的属性值，none隐藏，block块显示，inline行显示。
<script language="JavaScript">
function show(str){
var i=documeng.getElementById(str);
if (i.style.display == "none") {
i.style.display = "";
}
else{
i.style.display = "none";
}
}
</script>
4、滚动条
属性：
scrollLeft：水平滚动的距离；
scrollTop：垂直滚动的距离；
事件：
onscroll：滚动事件
注意：在chrome下，document.body.scrollTop能读出正常值，但是在ie6 和 firefox里，document.body.scrollTop的值始终为0，于是在网上搜索办法。原来是DTD的问题,要是页面直接用<html>开头的话就没有问题了。但是要符合web标准,DTD当然是不能少的。用document.documentElement.scrollTop可以解决这个问题。但又一个问题是，chrome并不认同ocument.documentElement.scrollTop这种写法，
实现页面滚动的广告图片：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>随鼠标滚动的广告图片</title>
<style type="text/css">
#main { text-align: center; } #adver {
position: absolute;
left: 50px;
top: 30px;
z-index: 2;
}
</style>
<script type="text/javascript">
var adverTop; //层距页面顶端距离
var adverLeft;
var adverObject; //层对象
function inix(){
adverObject=document.getElementById("adver"); //获得层对象
if(adverObject.currentStyle){
adverTop=parseInt(adverObject.currentStyle.top);
adverLeft=parseInt(adverObject.currentStyle.left);
}
else{
adverTop=parseInt(document.defaultView.getComputedStyle(adverObject,null).top);
adverLeft=parseInt(document.defaultView.getComputedStyle(adverObject,null).left);
}
}
function move(){
adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop || document.body.scrollTop)+"px";
adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft || document.body.scrollLeft)+"px";
}
window.onload=inix;
window.onscroll=move;
</script>
</head>
<body>
<div id="adver"><img src="data:images/adv.jpg"/></div>
<div id="main"><img src="data:images/main1.jpg"/><img src="data:images/main2.jpg"/><img src="data:images/main3.jpg"/></div>
</body>
</html>
Java Script基础（十） 访问样式表的更多相关文章
- Java Script基础（十一） 表单验证
一.表单验证的必要性: 表单验证在客户端和服务器端,客户端验证实际是直接调用JavaScript脚本对用户输入的数据进行验证:而服务器也同样可以实现数据验证,但是当服务器压力过大时,资源损耗会比较严重 ...
- Java script基础
Java script基础 Js的每个语句后面都要有分号. <script type="text/java script">所有JS内容</script> ...
- Java Script 基础
一. JS的简介 JavaScript是一种网页编程技术,经常用于创建动态交互网页 JavaScript是一种基于对象和事件驱动的解释性脚本语言,类似C语言和Java的语法 事先不编译:逐行执行:无需 ...
- 网页制作之html基础学习3-css样式表
样式:CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. 在样式里面用 /* */ 进行注释. 1.样式表的基本概念 1.1.样式表分类 1.内联样式表 和 ...
- CSS样式表基础知识、样式表的分类及选择器
一.CSS基本概念: CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 二.样式表的分类 1.内联样式表(和html联合 ...
- Java Script基础（十二） 正则表达式
一.正则表达式中常用的符号 虽然可以使用string函数来完成验证,但是这种验证方式不够严谨,而且编写比较麻烦.而正则表达式是一种描述字符模式的对象,由一些特殊的符号组成,其组成的字母模式用来匹配各种 ...
- Java Script 基础总结
1学习ajax需要一点CSS的基础和JavaScipt基础 今天重温一下Javascrpt基础 1.<script type="text/javascript">< ...
- Java script基础 回顾
一.语法 代码与C#相似,变量使用的是var引用出来,包含所有类型:可以直接使用,不用定义. 也是有内置分类的.例如:var b="10" var c=10;一个是字符串一个是整 ...
- Java Script基础（八） Array数组对象
一.Array数组 JavaScript中的数组也是具有相同数据类型的一个或者多个值得集合.用法和Java中的数组类似. Array对象的常用属性和方法: 属性: length:获取数组的长度: 方法 ...
随机推荐
- POJ 1947 Rebuilding Roads (树dp + 背包思想)
题目链接:http://poj.org/problem?id=1947 一共有n个节点,要求减去最少的边,行号剩下p个节点.问你去掉的最少边数. dp[u][j]表示u为子树根,且得到j个节点最少减去 ...
- VSTO安装部署(完美解决XP+2007)
从开始写VSTO的插件开始,安装部署一直就是一个很大的难题,其实难题的原因主要是针对XP+2007而言.在Win7上,由于基本上都预装了.net framework,所以安装起来其实问题不大. 主要需 ...
- poj - 3683 - Priest John's Busiest Day（2-SAT）
题意:有N场婚礼,每场婚礼的开始时间为Si,结束时间为Ti,每场婚礼有个仪式,历时Di,这个仪式要么在Si时刻开始,要么在Ti-Di时刻开始,问能否安排每场婚礼举行仪式的时间,使主持人John能参加所 ...
- Castle IOC容器内幕故事（下）
主要内容 1．ComponentModelBuilder 和 Contributors 2．Contributors分析 3．Handles分析 4．ComponentActivator分析 一．Co ...
- Android 图标上面添加提醒使用开源UI类库 Viewbadger
Viewbadger 1.BadgeView主要是继承了TextView,所以实际上就是一个TextView,底层放了一个label,可以自定义背景图,自定义背景颜色,是否显示,显示进入的动画效果以及 ...
- oracle 创建同义词
1.语法: 同义词 (SYNONMY) CREATE SYNONYM同义词名FOR 表名; CREATE SYNONYM同义词名FOR 表名@数据库链接名; Create synonym synony ...
- Builder
Builder模式的使用情景 相同的方法, 不同的执行顺序, 产生不同的事件结果 多个部件或零件, 都可以装配到一个对象中, 但是产生的运行结果又不相同 产品类比较复杂, 或者产品类中的调用顺序不同产 ...
- js正则表达式之解析——URL的正则表达式
首先,此片文章并不是直接告诉你,url的正则表达式是什么,以及怎么使用这个正则表达式去解析一个URL地址,相信这种问题在网络上已经能找到很多.本文的宗旨在于教你如何理解URL的正则表达式,以达到理解正 ...
- c# 使用hook来监控鼠标键盘事件的示例代码
如果这个程序在10几年前,QQ刚刚兴起的时候,有了这个代码,就可实现盗号了. 当然使用钩子我们更多的是实现"全局快捷键"的需求. 比如 程序最小化隐藏后要"某快捷键&qu ...
- MySQL中MySQL X.X Command Line Client一闪而过的问题
问题介绍:我安装完MySQL(我安装的是5.5)后,使用MySQL 5.5 Command Line Client,每次点击,总是一闪而过.解决方法如下: 首先进入cmd 切入MySQL的安 ...