DOM 操纵样式表

CSS对应的JavaScript样式属性:background—color/style.backgroundColor,color/style.color,font/style.font,font-family/style.fontFamily,font-weight/style.fontWeight.

一、局部改变样式 
分为改变直接样式,改变className和改变cssText三种。需要注意的是: 
注意大小写: 
javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法实现效果。 
调用方法: 
如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById(‘obj‘).style.className=”…”的写法是错误的!只能写成:document.getElementById(‘obj‘).className=”…” 
改变cssText 
但是如果用cssText的话,必须加上style,正确的写法是:document.getElementById(‘obj‘).style.cssText=”…”

改变直接样式我就不必说了,大家记得要写到具体样式即可,如 
document.getElementById(‘obj‘).style.backgroundColor=”#003366″

二、全局改变样式 
通常情况下,我们可以通过改变外链样式的的href的值实现网页样式的实时切换,也就是“改变模板风格”。这时候我们首先需要赋予需要改变的目标一个id,如

<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" /> 
调用时很简单,如

<span on click="javascript:document.getElementById(‘css‘).href = ‘ie.css‘">点我改变样式</span> 
对于新人往往不知道CSS具体样式在javascript怎么写,而且有时候在不同浏览器中要求也不一样。如float在IE中写成styleFloat,在FIREFOX中写成cssFloat,这就需要大家的积累了。在google中搜索“ccvita javascript”,也许会对你的疑惑有所帮助。

基础知识 
通常在网页中样式表的调用方法有三种。 
第一种:链入外部样式表文件 (Linking to a Style Sheet) 
你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:

<head> 
<title>文档标题</title> 
<link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css"> 
</link></head> 
而在XML中,你应该如下例所示在声明区中加入:

< ? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?> 
第二种:定义内部样式块对象 (Embedding a Style Block) 
你可以在你的HTML文档的和标记之间插入一个

块对象。 定义方式请参阅样式表语法。示例如下:

<html> 
<head> 
<title>文档标题</title> 
<style type="text/css"> 
<!-- 
body {font: 10pt "Arial"} 
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon} 
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} 
p {font: 10pt/12pt "Arial"; color: black} 
--> 
</style> 
</head> 
<body>  
</body></html> 
请注意,这里将style对象的type属性设置为”text/css”,是允许不支持这类型的浏览器忽略样式表单。

第三种:内联定义 (Inline Styles) 
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下:

<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁</p><p> </p>

时间: 2024-11-05 18:49:33

DOM 操纵样式表的相关文章

使用Dom操纵样式表

XHTML中的每个元素对象都有一个属性对象style,该对象包含了元素的所有CSS样式.对于每个CSS样式,style对象都有相关的属性与之对应,只是格式有所不同:对单个词的CSS样式,style对象用相同的属性名对应(CSS中的color对应style.color):对于两个词的样式,style对象用去掉两个词之间的连接线,并且第二个词的首字母大些的属性名对应(CSS中的background_color样式对应style.backgroundColor). 下面是几个常用的CSS样式和styl

JavaScript 使用DOM操纵样式表

一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.cre

DOM操作样式表

1.操作Style样式属性 1.1通过style对象的属性 document.getElementById("bbb").style.backgroundColor="red"; //由style的属性值访问或者获得的是内联样式 1.2通过style对象的方法//由于IE不支持,所以用第一种方法较好 getPropertyValue(propertyName);//用CSS属性中的写法:background-color getPropertyPriority();

JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)

层叠样式 表和动态HTML 层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准. 使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DHTML) CSS样式是一个名称/值的属性列表指定的,属性之间用分号隔开,名字属性和值属性之间用冒号隔开. 1.给文档元素应用样式规则(两种方法) a.在HTML标记的style属性中使用它们.如:<p style=margin-left:Lin;margin-right:lin;"/> b.使用样式

DOM样式表

一.getElementById的封装 function $(id) { return document.getElementById(id); } 二.cssRules 它是一个包含了样式表中定义的所有CSS规则的集合,chrome和firefox浏览器能正确实现该标准:IE浏览器将其命名为rules. document.styleSheets[sheetsIndex].cssRules[rulesIndex]; document.styleSheets[sheetsIndex].rules[

DOM Style样式对象的详细用法

DOM Style样式对象的详细用法 HTML Style样式比较复杂,相应访问.修改方法也有所差异.参考相关资料,整理如下. 典型Html文件如下,有三种定义方式. <head>     <style type="text/css">                /* 内部样式 */       h3 {color:green;}     </style>             <!-- 外部样式 style.css -->    

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法:

用dom操作样式和dom事件

1.样式表的操作 1.1获取样式表: var cssRules = document.styleSheets[0].cssRules //DOM规范 document.styleSheets[0].rules //IE 1.2获取最终样式 var divEle = document.getElementById("divId"); var backgroundColor = divEle.currentStyle.backgroundColor; //IE var background

JavaScript访问修改css样式表

1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" style="backgroundColor:blue;"></div> <script type="text/javascript"> var mydiv1=document.getElementById("myid"