JavaScript整改css样式style动态改变元素样式

发布时间：2023-08-28 14:47:04 所属栏目：教程来源：

导读：一、局部改变样式

分为改变直接样式，改变className和改变cssText三种。需要注意的是：

注意大小写：

javascript对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能

一、局部改变样式

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



</style>

</head>

<body>

</body></html>

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

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!