编程 Javascript

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

Posted in Javascript onDecember 18, 2013

一、局部改变样式

有三种方法：直接改变样式、改变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改变CSS样式(局部和全局)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

如何在父窗口中得知window.open()出的子窗口关闭事件

Oct 15 Javascript

浅析JavaScript中的常用算法与函数

Nov 21 Javascript

jquery操作cookie插件分享

Jan 14 Javascript

JavaScript排序算法之希尔排序的2个实例

Apr 04 Javascript

JavaScript中return false的用法

Mar 12 Javascript

JavaScript之promise_动力节点Java学院整理

Jul 03 Javascript

Node.js中使用mongoose操作mongodb数据库的方法

Sep 12 Javascript

如何使用vuex实现兄弟组件通信

Nov 02 Javascript

Jquery属性的获取/设置及样式添加/删除操作技巧分析

Dec 23 jQuery

通过实例解析vuejs如何实现调试代码

Jul 16 Javascript

jQuery实现动态操作table行

Nov 23 jQuery

TypeScript中条件类型精读与实践记录

Oct 05 Javascript

jquery 提示信息显示后自动消失的具体实现

Dec 18 #Javascript

javascript中数组的concat()方法使用介绍

Dec 18 #Javascript

javascript中数组的sort()方法的使用介绍

Dec 18 #Javascript

javascript中数组的冒泡排序使用示例

Dec 18 #Javascript

javascript中数组中求最大值示例代码

Dec 18 #Javascript

JS动态调用方法名示例介绍

Dec 18 #Javascript

javascript页面动态显示时间变化示例代码

Dec 18 #Javascript

You might like

php&java（三）

2006/10/09 PHP

PHP在字符串中查找指定字符串并删除的代码

2008/10/02 PHP

如何使用php绘制在图片上的正余弦曲线

2013/06/08 PHP

递归删除一个节点以及该节点下的所有节点示例

2014/03/19 PHP

ThinkPHP连接数据库的方式汇总

2014/12/05 PHP

PHP MySql增删改查的简单实例

2016/06/21 PHP

thinkPHP基于ajax实现的菜单与分页示例

2016/07/12 PHP

PHP+JS实现的商品秒杀倒计时用法示例

2016/11/15 PHP

PHP中的浅复制与深复制的实例详解

2017/10/26 PHP

kindeditor 加入七牛云上传的实例讲解

2017/11/12 PHP

jquery.validate使用攻略第一部

2010/07/01 Javascript

jQuery获得指定元素坐标的方法

2015/04/14 Javascript

纯js实现仿QQ邮箱弹出确认框

2015/04/29 Javascript

js实现随屏幕滚动的带缓冲效果的右下角广告代码

2015/09/04 Javascript

JS实现星星评分功能实例代码(两种方法)

2016/06/09 Javascript

浅谈JavaScript中promise的使用

2017/01/11 Javascript

浅谈react.js 之批量添加与删除功能

2017/04/17 Javascript

实现一个完整的Node.js RESTful API的示例

2017/09/29 Javascript

vuejs实现本地数据的筛选分页功能思路详解

2017/11/15 Javascript

jsonp跨域获取数据的基础教程

2018/07/01 Javascript

vue实现密码显示与隐藏按钮的自定义组件功能

2019/04/23 Javascript

vue使用微信JS-SDK实现分享功能

2019/08/23 Javascript

基于better-scroll 实现歌词联动功能的代码

2020/05/07 Javascript

python的urllib模块显示下载进度示例

2014/01/17 Python

Python函数中参数是传递值还是引用详解

2019/07/02 Python

Python字典的概念及常见应用实例详解

2019/10/30 Python

解决pyPdf和pyPdf2在合并pdf时出现异常的问题

2020/04/03 Python

mac安装python3后使用pip和pip3的区别说明

2020/09/01 Python

Python爬虫破解登陆哔哩哔哩的方法

2020/11/17 Python

美国电力供应商店/电气批发商：USESI

2018/10/12 全球购物

手术室护士自我鉴定

2013/10/14 职场文书

电子信息工程专业推荐信

2014/02/14 职场文书

《金子》教学反思

2014/04/13 职场文书

毕业典礼演讲稿

2014/05/13 职场文书

关于redisson缓存序列化几枚大坑说明

2021/08/04 Redis

springboot + mongodb 通过经纬度坐标匹配平面区域的方法

2021/11/01 MongoDB