编程 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 相关文章推荐

javascript实现回到顶部特效

May 06 Javascript

jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】

Jul 19 Javascript

AngularJs bootstrap搭载前台框架——js控制部分

Sep 01 Javascript

js实现可旋转的立方体模型

Oct 16 Javascript

Vue form 表单提交+ajax异步请求+分页效果

Apr 22 Javascript

js自定义trim函数实现删除两端空格功能

Feb 09 Javascript

jQuery实现购物车的总价计算和总价传值功能

Nov 28 jQuery

详解滑动穿透(锁body)终极探索

Apr 16 Javascript

解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

Oct 11 Javascript

详解vue中v-model和v-bind绑定数据的异同

Aug 10 Javascript

js实现可爱的气泡特效

Sep 05 Javascript

JS绘图Flot如何实现动态可刷新曲线图

Oct 16 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

PHPStorm+XDebug进行调试图文教程

2016/06/13 PHP

PHP实现的XXTEA加密解密算法示例

2018/08/28 PHP

php实现微信分享朋友链接功能

2019/02/18 PHP

jquery关于页面焦点的定位(文本框获取焦点时改变样式 )

2010/09/10 Javascript

jQuery层级选择器用法分析

2015/02/10 Javascript

Jquery日历插件制作简单日历

2015/10/28 Javascript

JS封装cookie操作函数实例(设置、读取、删除)

2015/11/17 Javascript

javascript关于继承解析

2016/05/10 Javascript

关于foreach循环中遇到的问题小结

2017/05/08 Javascript

详解Angular 4 表单快速入门

2017/06/05 Javascript

详解Node中导入模块require和import的区别

2017/08/11 Javascript

JavaScript canvas实现围绕旋转动画

2017/11/18 Javascript

angularJS实现动态添加,删除div方法

2018/02/27 Javascript

微信小程序中实现手指缩放图片的示例代码

2018/03/13 Javascript

Vue中使用vue-i18插件实现多语言切换功能

2018/04/25 Javascript

jQuery实现form表单序列化转换为json对象功能示例

2018/05/23 jQuery

Vue中Axios从远程/后台读取数据

2019/01/21 Javascript

layui下拉框获取下拉值(select)的例子

2019/09/10 Javascript

[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19

2018/08/21 DOTA

[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么！

2019/07/09 DOTA

[09:59]DOTA2-DPC中国联赛2月7日Recap集锦

2021/03/11 DOTA

Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程

2018/01/04 Python

Django中使用Celery的教程详解

2018/08/24 Python

Python Numpy库安装与基本操作示例

2019/01/08 Python

Python二维码生成识别实例详解

2019/07/16 Python

Python单元测试及unittest框架用法实例解析

2020/07/09 Python

Python利用myqr库创建自己的二维码

2020/11/24 Python

CSS3之多背景background使用示例

2013/10/18 HTML / CSS

英国美术用品购物网站：Cass Art

2019/10/08 全球购物

《爱如茉莉》教后反思

2014/04/12 职场文书

最常使用的求职信

2014/05/25 职场文书

圣诞节活动策划方案

2014/06/09 职场文书

领导班子作风建设年个人整改措施

2014/09/29 职场文书

CSS3通过var()和calc()函数实现动画特效

2021/03/30 HTML / CSS

Python+Appium新手教程

2021/04/17 Python

MySql新手入门的基本操作汇总

2021/05/13 MySQL