编程 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()弹出居中的窗口

Feb 01 Javascript

appendChild() 或 insertBefore()使用与区别介绍

Oct 11 Javascript

用户代理字符串userAgent可实现的四个识别

Sep 20 Javascript

基于javascript实现根据身份证号码识别性别和年龄

Jan 22 Javascript

Sort()函数的多种用法

Mar 20 Javascript

Vue-cli proxyTable 解决开发环境的跨域问题详解

May 18 Javascript

在vue里面设置全局变量或数据的方法

Mar 09 Javascript

Angularjs实现页面模板清除的方法

Jul 20 Javascript

微信小程序封装自定义弹窗的实现代码

May 08 Javascript

解决vuex数据异步造成初始化的时候没值报错问题

Nov 13 Javascript

JS实现炫酷雪花飘落效果

Aug 19 Javascript

three.js如何实现3D动态文字效果

Mar 03 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错误提示failed to open stream: HTTP request failed!的完美解决方法

2011/06/06 PHP

PHP图像识别技术原理与实现

2016/10/27 PHP

详解PHP多个进程配合redis的有序集合实现大文件去重

2019/03/06 PHP

CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库

2010/02/07 Javascript

基于jquery的finkyUI插件与Ajax实现页面数据加载功能

2010/12/03 Javascript

40款非常棒的jQuery 插件和制作教程（系列二）

2011/11/02 Javascript

当鼠标移动到图片上时跟随鼠标显示放大的图片效果

2013/06/06 Javascript

JavaScript实现简单的二级导航菜单实例

2015/04/15 Javascript

最精简的JavaScript实现鼠标拖动效果的方法

2015/05/11 Javascript

jquery实现滑屏大图定时收缩为小banner图片的广告代码

2015/09/02 Javascript

javascript学习小结之prototype

2015/12/03 Javascript

jquery在ie7下选择器的问题导致append失效的解决方法

2016/01/10 Javascript

jQuery动态加载css文件实现方法

2016/06/15 Javascript

BootStrap组件之进度条的基本用法

2017/01/19 Javascript

jQuery实现的简单在线计算器功能

2017/05/11 jQuery

JS按钮闪烁功能的实现代码

2017/07/21 Javascript

微信小程序之发送短信倒计时功能

2017/08/30 Javascript

使用vuex的state状态对象的5种方式

2018/04/19 Javascript

浅析Vue项目中使用keep-Alive步骤

2018/07/27 Javascript

详解ES6 系列之异步处理实战

2018/10/26 Javascript

记录一次完整的react hooks实践

2019/03/11 Javascript

python基础知识小结之集合

2015/11/25 Python

python 脚本生成随机字母 + 数字密码功能

2018/05/26 Python

opencv 获取rtsp流媒体视频的实现方法

2019/08/23 Python

python 数据提取及拆分的实现代码

2019/08/26 Python

python简单利用字典破解zip文件口令

2020/09/07 Python

利用html5 canvas破解简单验证码及getImageData接口应用

2013/01/25 HTML / CSS

欧洲最大的婴幼儿服装及内衣公司：Petit Bateau（小帆船）

2016/08/16 全球购物

Ted Baker英国官网：男士和女士服装及配件

2017/03/13 全球购物

寻找完美的房车租赁：RVShare

2019/02/23 全球购物

经典c++面试题四

2015/05/14 面试题

单位刻章介绍信范文

2014/01/11 职场文书

党组织领导班子整改方案

2014/10/25 职场文书

医生个人年度总结

2015/02/28 职场文书

孝女彩金观后感

2015/06/10 职场文书

创作书写之导游词实用技巧分享（干货）

2019/12/20 职场文书