Javascript改变CSS样式(局部和全局)_javascript技巧

一、局部改变样式

有三种方法:直接改变样式、改变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>

时间: 2024-10-30 10:49:15

Javascript改变CSS样式(局部和全局)_javascript技巧的相关文章

Javascript改变CSS样式

 改变CSS样式分为局部和全局,下面为大家介绍下使用Javascript具体的实现,感兴趣的朋友可以参考下 一.局部改变样式    有三种方法:直接改变样式.改变className和改变cssText    改变className: document.getElementById('obj').className="-"    改变cssText:document.getElementById('obj').style.cssText="width:20px; border:

JavaScript改变CSS样式的方法汇总

  JavaScript修改CSS有4种方法:1.修改节点style(内联样式);2.改变节点class或id;3.写入新的css;4.替换页面中的样式表.今天主要给大家介绍下前2种,因为后两种个人不是很推荐大家使用 JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 . JavaScript修改CSS有4种方法: 修改节点style(内联样式); 改变节点class或id; 写入新的css; 替换页面中的样式表. 个人不

js改变style样式和css样式的简单实例_javascript技巧

js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Change.html</title> <meta http-equiv="content-t

JavaScript动态添加css样式和script标签_javascript技巧

[动态添加css样式] <html> <head> <script type="text/javascript"> window.onload=function(){ var head=document.getElementsByTagName('head')[0]; //获取到head元素 var link=document.createElement('link'); //创建link元素节点,也就是link标签 link.rel="s

js中用cssText设置css样式的简单方法_javascript技巧

如果网页中一个 id为"no"的标签,暂且当div标签来tell: 想要在js中设置这个div的css样式,很一般的做法是: var obj = document.getElementByIdx_x_x('no'); obj.style.width = '400px'; obj.style.height = '300px'; 如果要设置一堆又一堆的css样式呢,太麻烦了把. 一般情况下都会结合css来添加className或者改变className达到想要的效果,但是如果你create

JS读写CSS样式的方法汇总_javascript技巧

为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式 如:var elm = document.getElementById('test');       elm.style.color = 'black'; 二.通过Element对象的getAttribute().setAttribute().remo

JS修改css样式style浅谈_javascript技巧

一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N"写成"n",cssText也不能够把"T"写成"t",否则无法实现效果. 调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.cl

javascript动态设置样式style实例分析_javascript技巧

本文实例讲述了javascript动态设置样式style的方法.分享给大家供大家参考.具体分析如下: 动态修改style 1.易错:修改元素的样式不是设置class属性,而是className属性. 2.易错:单独修改样式的属性使用"style.属性名".注意在css中属性名在javascript中 操作的时候属性名可能不一样,主要集中在那些属性名中含有-的属性,因为 javascript中-是不能做属性,类名的.所以在CSS中背景色是background-clolor,而javasc

多浏览器兼容的动态加载 JavaScript 与 CSS第1/2页_javascript技巧

在介绍ensure内部的实现之前,让我们先来看看其功能: ensure({ html: "popup.html", javascript: "popup.js", css: "popup.css" }, function() { Popup.show("hello world"); } ); 在这段代码中,ensure首先会确保popup.html.popup.js.popup.css这3个文件的加载,如果都没加载过ensur