手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JavaScript修改css样式style
JavaScript修改css样式style
摘要:一、局部改变样式分为改变直接样式,改变className和改变cssText三种。需要注意的是:注意大小写:javascript对大小写十分...

一、局部改变样式

分为改变直接样式,改变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,如

<linkrel="stylesheet"type="text/css"id="css"href="firefox.css"/>

调用时很简单,如

<spanonclick="javascript:document.getElementById('css').href='ie.css'">点我改变样式</span>

对于新人往往不知道CSS具体样式在javascript怎么写,而且有时候在不同浏览器中要求也不一样。如float在IE中写成styleFloat,在FIREFOX中写成cssFloat,这就需要大家的积累了。在google中搜索“ccvitajavascript”,也许会对你的疑惑有所帮助。

基础知识

通常在网页中样式表的调用方法有三种。

第一种:链入外部样式表文件(LinkingtoaStyleSheet)

你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:

<head>

<title>文档标题</title>

<linkrel=stylesheethref="http://www.ccvita.com/demo.css"type="text/css">

</link></head>

而在XML中,你应该如下例所示在声明区中加入:

<?xml-stylesheettype="text/css"href="http://www.dhtmlet.com/dhtmlet.css"?>

第二种:定义内部样式块对象(EmbeddingaStyleBlock)

你可以在你的HTML文档的和标记之间插入一个

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

<html>

<head>

<title>文档标题</title>

<styletype="text/css">

<>

</style>

</head>

<body>

</body></html>

请注意,这里将style对象的type属性设置为”text/css”,是允许不支持这类型的浏览器忽略样式表单。

第三种:内联定义(InlineStyles)

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

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

【JavaScript修改css样式style】相关文章:

JavaScript事件的理解

JavaScript数据结构与算法之栈与队列

javascript获取select值的方法分析

JavaScript实现斗地主游戏的思路

JavaScript中的pow()方法使用

JavaScript中string对象

javascript实现仿腾讯游戏选择

JavaScript调试技巧

JavaScript函数使用的基本教程

JavaScript中的函数嵌套使用

精品推荐
分类导航