关于javascript网页改样式的信息

JS修改CSS设置的样式

语法：元素.style.样式名=样式值

注意：如果CSS的样式名中含有-，这种名称在JS中是不合法的，比如 background-color 。需要将这种样式名修改为驼峰命名法：去掉-，然后将-后的第一个字母大写，比如 backgroundColor

我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示

但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效

所以尽量不要为样式添加!important

语法：元素.style.样式名

通过style属性设置和读取的都是内联样式，无法读取样式表中的样式

语法:元素.currentStyle.样式名

如果当前元素没有设置该样式，则获取它的默认值

例如： box1.currentStyle.width

这个方法是window的方法，可以直接使用需要两个参数

第一个:要获取样式的元素

第二个:可以传递一个伪元素，一般都传null

该方法会返回一个对象，对象中封装了当前元素对应的样式

可以通过对象﹒样式名来读取样式

如果获取的 样式没有设置 ，则会获取到真实的值，而不是默认值

比如:没有设置width，它不会获取到auto，而是 一个长度

注意：通过currentStyle和getComputedstyle()读取到的样式都是只读的，不能修改,如果要修改必须通过style属性

参数：

obj 要获取样式的元素

name 要获取的样式名

相关问答

Q1: 如何使用JavaScript的className属性改变网页的样式？

网页的样式一般都定义在了css的文件中，而JavaScript中的className的属性能让css中的样式动态的应用到网页的元素上。比如，在css中有样式.example。代码如下：

.example {

color: #fff;

font-size 1em;

text-align: right;

}

要用JavaScript动态的应用到网页上，可以使用如下类似的代码：

function preparePage() {

//当mainContent元素被点击，mainContent的样式将会改变

document.getElementById("mainContent").onclick = function() {

//检查当前mainContent的样式，若是example，则将样式取消。

//取消样式直接将className属性赋值为空字符串””就行。

//若mainContent的样式不是example，则应用example样式。

if( document.getElementById("mainContent").className == "example") {

document.getElementById("mainContent").className = "";

} else {

document.getElementById("mainContent").className = "example";

}

};

}

window.onload = function() {

preparePage();

}

通过上面的JavaScript代码，我们可以通过点击来控制mainContent元素的样式。上面的代码是从秒秒学上扣出来的，如果你想要完整的案例，可以在秒秒学的《使用JavaScript美化界面》一章中找到。

Q2: JavaScript修改CSS样式的常用方法有哪些?

有两种办法

(1)敲代码直接修改

(2)获取对象，通过style来动态修改

document三个方法：getElementById()、getElementsByTagName()、getElementsByName()

或者通过传参数的方法获取对象,再对对象的style样式里的属性进行修改,例如document.getElementById("el").style.color="red";

document.getElementById("el").style.backgroundImage="2.png";

Q3: javascript 改变指定css样式

javascript改变CSS样式分为局部和全局，分别如下：

一、局部改变样式

有三种方法：直接改变样式、改变className和改变cssText

改变className： document.getElementById('obj').className="…"

改变cssText：document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;";

改变直接样式： document.getElementById('obj').style.backgroundColor="#003366″

二、全局改变样式

通过改变外链样式的的href的值实现网页样式的实时切换，也就是"改变模板风格"。

首先需要赋予需要改变的目标一个id，如

代码如下:

link rel="stylesheet" type="text/css" id="css" href="firefox.css" /

调用时很简单，如

代码如下:

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