JS修改css样式style浅谈


Posted in Javascript onMay 06, 2013

一、局部改变样式

分为改变直接样式,改变className和改变cssText三种。需要注意的是:
注意大小写:
javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法实现效果。
调用方法:
如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.className=”…”的写法是错误的!只能写成:document.getElementById('obj').className=”…”
改变cssText
但是如果用cssText的话,必须加上style,正确的写法是:document.getElementById('obj').style.cssText=”…”

改变直接样式我就不必说了,大家记得要写到具体样式即可,如
document.getElementById('obj').style.backgroundColor=”#003366″

二、全局改变样式

通常情况下,我们可以通过改变外链样式的的href的值实现网页样式的实时切换,也就是“改变模板风格”。这时候我们首先需要赋予需要改变的目标一个id,如

<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
调用时很简单,如

<span on click="javascript:document.getElementById('css').href = 'ie.css'">点我改变样式</span>
对于新人往往不知道CSS具体样式在javascript怎么写,而且有时候在不同浏览器中要求也不一样。如float在IE中写成styleFloat,在FIREFOX中写成cssFloat,这就需要大家的积累了。在google中搜索“ccvita javascript”,也许会对你的疑惑有所帮助。

基础知识
通常在网页中样式表的调用方法有三种。
第一种:链入外部样式表文件 (Linking to a Style Sheet)
你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:

<head> 
<title>文档标题</title> 
<link rel=stylesheet href="https://3water.com/demo.css" type="text/css"> 
</link> 
</head>

而在XML中,你应该如下例所示在声明区中加入:

< ? xml-stylesheet type="text/css" href="https://3water.com/dhtmlet.css" ?>
第二种:定义内部样式块对象 (Embedding a Style Block)
你可以在你的HTML文档的和标记之间插入一个

块对象。 定义方式请参阅样式表语法。示例如下:

<html> 
<head> 
<title>文档标题</title> 
<style type="text/css"> 
<!-- 
body {font: 10pt "Arial"} 
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon} 
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} 
p {font: 10pt/12pt "Arial"; color: black} 
--> 
</style> 
</head> 
<body> 
</body></html>

请注意,这里将style对象的type属性设置为”text/css”,是允许不支持这类型的浏览器忽略样式表单。

第三种:内联定义 (Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下:

<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁</p><p> </p>

Javascript 相关文章推荐
JavaScript单元测试ABC
Apr 12 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
用JavaScript修改CSS属性的代码
May 06 #Javascript
Jquery带搜索框的下拉菜单
May 06 #Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 #Javascript
jquery高效反选具体实现
May 05 #Javascript
Jquery为a标签的href赋值实现代码
May 03 #Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 #Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 #Javascript
You might like
数字转英文
2006/12/06 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php中session定期自动清理的方法
2015/11/12 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
处理Python中的URLError异常的方法
2015/04/30 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
python调用百度语音识别api
2018/08/30 Python
python实现自动解数独小程序
2019/01/21 Python
python图形用户接口实例详解
2019/12/16 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
新闻专业应届生求职信
2013/10/31 职场文书
怎么写有吸引力的自荐信
2013/11/17 职场文书
文明生主要事迹
2014/05/25 职场文书
园林技术专业求职信
2014/07/28 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
如何在Python项目中引入日志
2021/05/31 Python
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏
Python+DeOldify实现老照片上色功能
2022/06/21 Python