大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

关于javascript网页改样式的信息

JS修改CSS设置的样式

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

专注于为中小企业提供成都网站建设、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业八宿免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

注意:如果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 要获取的样式名

如何使用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美化界面》一章中找到。

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

有两种办法

(1)敲代码直接修改

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

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

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

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

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


网站名称:关于javascript网页改样式的信息
链接地址:http://dzwzjz.com/article/dsdjghg.html
在线咨询
服务热线
服务热线:028-86922220
TOP