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这种写法，

因此比较兼容的写法是：

var oscrollTop = document.documentElement.scrollTop || document.body.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:获取数组的长度: 方法 ...

随机推荐

说下Fedora下把SpiderMonkey放入Eclipse内编译的过程
首先要知道SpiderMonkey是个什么玩意详细的可以看看这里(当然,如果你有google翻译的话看起来也一样费劲,你可以在语言那里选择中文.看完了再转回英文-因为中文有很多文档都没有的,比如:B ...
Json.Net学习笔记
http://www.cnblogs.com/xiaojinhe2/archive/2011/10/28/2227789.html Newtonsoft.Json(Json.Net)学习笔记 http ...
通俗理解C#委托和事件
引言委托和事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容易了,而没有过去 ...
WEB前端性能优化小结
转:http://www.gafish.net/archives/1514 对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不 ...
c# 轻量级ORM框架之 WhereHelper (二)
上篇文章发布了一些设计orm框架基层的和实现,有朋友提出WhereHelper是亮点,能被认可我表示高兴. 我就把WhereHelper设计思想和代码公开下. WhereHelper 的概念就是再拼接 ...
Yeoman+Express+Angular在Linux上开发配置方法
$mkdir ExpressWithAngularTest $cd ExpressWithAngularTest choose needed components you'd like to add ...
little's law(律特法则)
参考:https://en.wikipedia.org/wiki/Little%27s_law(周末看一下) 最近在做性能压力测试,开始时,压力压不上去,参考: N = X * E[T] ,N就是你的 ...
HTML的disabled属性及readonly属性
disabled属性的input不会提交到服务器. readonly属性的input会提交到服务器.
Linux文件空洞与稀疏文件转
1.Linux文件空洞与稀疏文件 2.文件系统数据存储 3.文件系统调试文件空洞在UNIX文件操作中,文件位移量可以大于文件的当前长度在这种情况下,对该文件的下一次写将延长该文件,并在 ...
LinkedHashMap介绍
转载:http://uule.iteye.com/blog/1522291 jdk1.7API文档链接:http://tool.oschina.net/apidocs/apidoc?api=jdk_7 ...

Java Script基础（十） 访问样式表

Java Script基础（十） 访问样式表的更多相关文章

随机推荐

热门专题

Java Script基础（十）访问样式表

Java Script基础（十）访问样式表的更多相关文章